Code
<PyxisNavigation
:menu-items="menuItems"
/>
Example of a regular Navigation component
menuItems: [
{
sectionTitle: "Product",
items: [
{
label: "Email security",
name: "email-security",
isDisplayed: true,
iconClass: "far fa-shield-check",
isProductItem: true,
color: "success",
dataTestid: "email-security-product-item",
subLevel: {
headerLabel: "Email security",
headerDescription: "Control Panel",
headerIconClass: "far fa-shield-check",
items: [
{
sectionTitle: "Security",
items: [
{
label: "Spam & malware protection",
name: "spam-malware-protection",
disabled: false,
isDisplayed: true,
iconClass: "far fa-envelope-open",
isProductItem: false,
dataTestid:
"spam-malware-protection-item",
subLevel: {
headerLabel:
"Spam & malware protection",
headerDescription:
"Control Panel",
headerIconClass:
"far fa-envelope-open",
headerColor: "primary",
items: [
{
sectionTitle: "Policy",
items: [
{
label: "Content policy",
name: "content-policy",
iconClass:
"far fa-laptop-file",
isDisplayed:
true,
isProductItem:
false,
dataTestid:
"content-policy-item",
},
{
label: "Attachment policy",
name: "attachment-policy",
isDisplayed:
true,
iconClass:
"far fa-link-simple",
isProductItem:
false,
dataTestid:
"attachment-policy-item",
},
],
},
],
},
},
{
label: "Advanced threat protection",
name: "advanced-threat-protection",
isDisplayed: true,
iconClass:
"far fa-triangle-exclamation",
isProductItem: false,
dataTestid:
"advanced-threat-protection-item",
},
],
},
],
},
},
{
label: "365 Tenant manager",
name: "tenant-manager",
isDisplayed: true,
iconClass: "far fa-shield-check",
isProductItem: true,
color: "jupiter",
dataTestid: "tenant-manager-product-item",
},
{
label: "365 Permission manager",
name: "permission-manager",
isDisplayed: true,
iconClass: "far fa-shield-check",
isProductItem: true,
color: "earth",
dataTestid: "permission-manager-product-item",
},
{
label: "365 Total backup",
name: "total-backup",
isDisplayed: true,
iconClass: "far fa-shield-check",
isProductItem: true,
color: "secondary",
dataTestid: "total-backup-product-item",
},
{
label: "AI Recipient",
name: "ai-recipient",
isDisplayed: true,
iconClass: "far fa-shield-check",
isProductItem: true,
color: "danger",
dataTestid: "ai-recipient-product-item",
},
{
label: "VM Backup",
name: "vm-backup",
isDisplayed: true,
iconClass: "far fa-shield-check",
isProductItem: true,
color: "premium",
dataTestid: "vm-backup-product-item",
},
{
label: "Endpoint",
name: "endpoint",
isDisplayed: true,
iconClass: "far fa-shield-check",
isProductItem: true,
color: "neptune",
dataTestid: "endpoint-product-item",
},
{
label: "Security awareness",
name: "security-awareness",
isDisplayed: true,
iconClass: "far fa-shield-check",
isProductItem: true,
color: "primary",
dataTestid: "security-awareness-product-item",
},
],
},
{
sectionTitle: "General settings",
items: [
{
label: "Product configuration",
name: "product-configuration",
isExternalLink: true,
route: "https://www.google.com",
isDisplayed: true,
iconClass: "far fa-gear",
isProductItem: false,
dataTestid: "product-configuration-item",
},
{
label: "Customer settings",
name: "customer-settings",
isDisplayed: true,
iconClass: "far fa-user-gear",
isProductItem: false,
dataTestid: "customer-settings-item",
},
{
label: "Logout",
name: "logout",
isDisplayed: true,
iconClass: "far fa-arrow-left-from-bracket",
isProductItem: false,
dataTestid: "logout-item",
},
],
},
],
Example of a menuItem object to be provided to the component
Props
The Navigation component supports the following Props:
|
Name |
Type |
Default |
Required |
|---|---|---|---|
|
menuItems |
SectionOfItems[] |
undefined |
true |
|
shouldBlurBackground |
boolean |
true |
false |
|
ariaLabel |
string |
undefined |
false |
|
logoSrc |
string |
undefined |
false |
Types
export type SectionOfItems = {
sectionTitle?: string
items: NavigationItem[]
}
type NavigationItem = {
label: string
name: string
iconClass: string
isProductItem: boolean // Should be true to display background on NavigationItem Icon
isDisplayed: boolean
color?: IconVariants["color"] //from @pyxis/styles dependency
dataTestid: string
disabled?: boolean
isExternalLink?: boolean
route?: string
targetBlank?: boolean
subLevel?: SubLevelType // Provide sub-level navigation (maximum 3 levels deep)
}
type SubLevelType = {
headerLabel: string
headerDescription?: string
headerIconClass: string
headerColor?: IconVariants["color"] //from @pyxis/styles dependency
items: SectionOfItems[]
}