Examples
Props
Nav
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| aria-label | string | No | Accessibility label | |
| children | React.ReactNode | No | Anything that can be rendered inside of the nav | |
| className | string | No | Additional classes added to the container | |
| onSelect | (selectedItem: { groupId: number | string; itemId: number | string; to: string; event: React.FormEvent<HTMLInputElement>; }) => void | No | () => undefined | Callback for updating when item selection changes |
| onToggle | (toggledItem: { groupId: number | string; isExpanded: boolean; event: React.FormEvent<HTMLInputElement>; }) => void | No | () => undefined | Callback for when a list is expanded or collapsed |
| ouiaSafe | No type info | No | true | |
| theme | 'dark' | 'light' | No | 'dark' | Indicates which theme color to use |
| variant | 'default' | 'horizontal' | 'tertiary' | No | For horizontal navs |
NavList
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| ariaLeftScroll | string | No | 'Scroll left' | Aria-label for the left scroll button |
| ariaRightScroll | string | No | 'Scroll right' | Aria-label for the right scroll button |
| children | React.ReactNode | No | Children nodes | |
| className | string | No | Additional classes added to the list |
NavGroup
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | React.ReactNode | No | null | Anything that can be rendered inside of the group |
| className | string | No | '' | Additional classes added to the container |
| id | string | No | getUniqueId() | Identifier to use for the section aria label |
| title | string | Yes | Title shown for the group |
NavItem
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | React.ReactNode | No | Content rendered inside the nav item. If React.isValidElement(children) props onClick, className and aria-current will be injected. | |
| className | string | No | Additional classes added to the nav item | |
| component | React.ReactNode | No | 'a' | Component used to render NavItems |
| groupId | string | number | null | No | null | Group identifier, will be returned with the onToggle and onSelect callback passed to the Nav component |
| isActive | boolean | No | false | Flag indicating whether the item is active |
| itemId | string | number | null | No | null | Item identifier, will be returned with the onToggle and onSelect callback passed to the Nav component |
| onClick | NavSelectClickHandler | No | null | Callback for item click |
| preventDefault | boolean | No | false | If true prevents the default anchor link action to occur. Set to true if you want to handle navigation yourself. |
| styleChildren | boolean | No | true | Whether to set className on children when React.isValidElement(children) |
| to | string | No | Target navigation link |
NavItemSeparator
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| component | No type info | No | 'li' |
NavExpandable
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| buttonProps | any | No | Additional props added to the NavExpandable <button> | |
| children | React.ReactNode | No | '' | Anything that can be rendered inside of the expandable list |
| className | string | No | '' | Additional classes added to the container |
| groupId | string | number | No | null | Group identifier, will be returned with the onToggle and onSelect callback passed to the Nav component |
| id | string | No | '' | Identifier to use for the section aria label |
| isActive | boolean | No | false | If true makes the expandable list title active |
| isExpanded | boolean | No | false | Boolean to programatically expand or collapse section |
| onExpand | (e: React.MouseEvent<HTMLLIElement, MouseEvent>, val: boolean) => void | No | allow consumer to optionally override this callback and manage expand state externally | |
| srText | string | No | '' | If defined, screen readers will read this text instead of the list title |
| title | string | Yes | Title shown for the expandable list |
CSS variables
| .pf-c-nav | --pf-c-nav--Transition | all 250ms cubic-bezier(.42, 0, .58, 1) | |
| .pf-c-nav | --pf-c-nav__item--m-expanded__toggle-icon--Rotate | 90deg | |
| .pf-c-nav | --pf-c-nav--m-light__item--before--BorderColor | #f0f0f0 | |
| .pf-c-nav | --pf-c-nav--m-light__item--m-current--not--m-expanded__link--BackgroundColor | #f0f0f0 | |
| .pf-c-nav | --pf-c-nav--m-light__link--Color | #151515 | |
| .pf-c-nav | --pf-c-nav--m-light__link--hover--Color | #151515 | |
| .pf-c-nav | --pf-c-nav--m-light__link--focus--Color | #151515 | |
| .pf-c-nav | --pf-c-nav--m-light__link--active--Color | #151515 | |
| .pf-c-nav | --pf-c-nav--m-light__link--m-current--Color | #151515 | |
| .pf-c-nav | --pf-c-nav--m-light__link--hover--BackgroundColor | #f0f0f0 | |
| .pf-c-nav | --pf-c-nav--m-light__link--focus--BackgroundColor | #f0f0f0 | |
| .pf-c-nav | --pf-c-nav--m-light__link--active--BackgroundColor | #f0f0f0 | |
| .pf-c-nav | --pf-c-nav--m-light__link--m-current--BackgroundColor | #f0f0f0 | |
| .pf-c-nav | --pf-c-nav--m-light__link--before--BorderColor | #f0f0f0 | |
| .pf-c-nav | --pf-c-nav--m-light__link--after--BorderColor | #06c | |
| .pf-c-nav | --pf-c-nav--m-light__link--m-current--after--BorderColor | #06c | |
| .pf-c-nav | --pf-c-nav--m-light__section-title--Color | #6a6e73 | |
| .pf-c-nav | --pf-c-nav--m-light__section-title--BorderBottomColor | #f0f0f0 | |
| .pf-c-nav | --pf-c-nav--m-light--c-divider--BackgroundColor | #f0f0f0 | |
| .pf-c-nav | --pf-c-nav--m-light__subnav__link--hover--after--BorderColor | #d2d2d2 | |
| .pf-c-nav | --pf-c-nav--m-light__subnav__link--focus--after--BorderColor | #d2d2d2 | |
| .pf-c-nav | --pf-c-nav--m-light__subnav__link--active--after--BorderColor | #d2d2d2 | |
| .pf-c-nav | --pf-c-nav--m-light__subnav__link--m-current--after--BorderColor | #06c | |
| .pf-c-nav | --pf-c-nav__item--MarginTop | 0 | |
| .pf-c-nav | --pf-c-nav__item--m-current--not--m-expanded__link--BackgroundColor | #4f5255 | |
| .pf-c-nav | --pf-c-nav__link--m-current--not--m-expanded__link--after--BorderWidth | 4px | |
| .pf-c-nav | --pf-c-nav__item--before--BorderColor | #3c3f42 | |
| .pf-c-nav | --pf-c-nav__item--before--BorderWidth | 1px | |
| .pf-c-nav | --pf-c-nav__link--FontSize | 1rem | |
| .pf-c-nav | --pf-c-nav__link--FontWeight | 400 | |
| .pf-c-nav | --pf-c-nav__link--PaddingTop | 1rem | |
| .pf-c-nav | --pf-c-nav__link--PaddingRight | 1rem | |
| .pf-c-nav | --pf-c-nav__link--PaddingBottom | 1rem | |
| .pf-c-nav | --pf-c-nav__link--PaddingLeft | 1rem | |
| .pf-c-nav | --pf-c-nav__link--xl--PaddingRight | 1.5rem | |
| .pf-c-nav | --pf-c-nav__link--xl--PaddingLeft | 1.5rem | |
| .pf-c-nav | --pf-c-nav__link--Color | #fff | |
| .pf-c-nav | --pf-c-nav__link--hover--Color | #fff | |
| .pf-c-nav | --pf-c-nav__link--focus--Color | #fff | |
| .pf-c-nav | --pf-c-nav__link--active--Color | #fff | |
| .pf-c-nav | --pf-c-nav__link--m-current--Color | #fff | |
| .pf-c-nav | --pf-c-nav__link--BackgroundColor | transparent | |
| .pf-c-nav | --pf-c-nav__link--hover--BackgroundColor | #3c3f42 | |
| .pf-c-nav | --pf-c-nav__link--focus--BackgroundColor | #3c3f42 | |
| .pf-c-nav | --pf-c-nav__link--active--BackgroundColor | #3c3f42 | |
| .pf-c-nav | --pf-c-nav__link--m-current--BackgroundColor | #4f5255 | |
| .pf-c-nav | --pf-c-nav__link--OutlineOffset | calc(0.25rem * -1) | |
| .pf-c-nav | --pf-c-nav__link--before--BorderColor | #3c3f42 | |
| .pf-c-nav | --pf-c-nav__link--before--BorderBottomWidth | 1px | |
| .pf-c-nav | --pf-c-nav__link--hover--before--BorderBottomWidth | 0 | |
| .pf-c-nav | --pf-c-nav__link--focus--before--BorderBottomWidth | 0 | |
| .pf-c-nav | --pf-c-nav__link--active--before--BorderBottomWidth | 0 | |
| .pf-c-nav | --pf-c-nav__link--m-current--before--BorderBottomWidth | 0 | |
| .pf-c-nav | --pf-c-nav__link--after--BorderColor | #73bcf7 | |
| .pf-c-nav | --pf-c-nav__link--hover--after--BorderColor | #73bcf7 | |
| .pf-c-nav | --pf-c-nav__link--focus--after--BorderColor | #73bcf7 | |
| .pf-c-nav | --pf-c-nav__link--active--after--BorderColor | #73bcf7 | |
| .pf-c-nav | --pf-c-nav__link--m-current--after--BorderColor | #73bcf7 | |
| .pf-c-nav | --pf-c-nav__link--after--BorderLeftWidth | 0 | |
| .pf-c-nav | --pf-c-nav__link--hover--after--BorderLeftWidth | 0 | |
| .pf-c-nav | --pf-c-nav__link--focus--after--BorderLeftWidth | 0 | |
| .pf-c-nav | --pf-c-nav__link--active--after--BorderLeftWidth | 0 | |
| .pf-c-nav | --pf-c-nav__link--m-current--after--BorderLeftWidth | 4px | |
| .pf-c-nav | --pf-c-nav--m-horizontal__link--PaddingTop | 0.5rem | |
| .pf-c-nav | --pf-c-nav--m-horizontal__link--PaddingRight | 1rem | |
| .pf-c-nav | --pf-c-nav--m-horizontal__link--PaddingBottom | 0.5rem | |
| .pf-c-nav | --pf-c-nav--m-horizontal__link--PaddingLeft | 1rem | |
| .pf-c-nav | --pf-c-nav--m-horizontal__link--lg--PaddingTop | 1.5rem | |
| .pf-c-nav | --pf-c-nav--m-horizontal__link--lg--PaddingBottom | 1.5rem | |
| .pf-c-nav | --pf-c-nav--m-horizontal__link--Right | 1rem | |
| .pf-c-nav | --pf-c-nav--m-horizontal__link--Left | 1rem | |
| .pf-c-nav | --pf-c-nav--m-horizontal__link--Color | #d2d2d2 | |
| .pf-c-nav | --pf-c-nav--m-horizontal__link--hover--Color | #73bcf7 | |
| .pf-c-nav | --pf-c-nav--m-horizontal__link--focus--Color | #73bcf7 | |
| .pf-c-nav | --pf-c-nav--m-horizontal__link--active--Color | #73bcf7 | |
| .pf-c-nav | --pf-c-nav--m-horizontal__link--m-current--Color | #73bcf7 | |
| .pf-c-nav | --pf-c-nav--m-horizontal__link--BackgroundColor | transparent | |
| .pf-c-nav | --pf-c-nav--m-horizontal__link--hover--BackgroundColor | transparent | |
| .pf-c-nav | --pf-c-nav--m-horizontal__link--focus--BackgroundColor | transparent | |
| .pf-c-nav | --pf-c-nav--m-horizontal__link--active--BackgroundColor | transparent | |
| .pf-c-nav | --pf-c-nav--m-horizontal__link--m-current--BackgroundColor | transparent | |
| .pf-c-nav | --pf-c-nav--m-horizontal__link--before--BorderColor | #73bcf7 | |
| .pf-c-nav | --pf-c-nav--m-horizontal__link--before--BorderWidth | 0 | |
| .pf-c-nav | --pf-c-nav--m-horizontal__link--hover--before--BorderWidth | 3px | |
| .pf-c-nav | --pf-c-nav--m-horizontal__link--focus--before--BorderWidth | 3px | |
| .pf-c-nav | --pf-c-nav--m-horizontal__link--active--before--BorderWidth | 3px | |
| .pf-c-nav | --pf-c-nav--m-horizontal__link--m-current--before--BorderWidth | 3px | |
| .pf-c-nav | --pf-c-nav--m-tertiary__link--PaddingTop | 0.5rem | |
| .pf-c-nav | --pf-c-nav--m-tertiary__link--PaddingRight | 1rem | |
| .pf-c-nav | --pf-c-nav--m-tertiary__link--PaddingBottom | 0.5rem | |
| .pf-c-nav | --pf-c-nav--m-tertiary__link--PaddingLeft | 1rem | |
| .pf-c-nav | --pf-c-nav--m-tertiary__link--Right | 1rem | |
| .pf-c-nav | --pf-c-nav--m-tertiary__link--Left | 1rem | |
| .pf-c-nav | --pf-c-nav--m-tertiary__link--Color | #151515 | |
| .pf-c-nav | --pf-c-nav--m-tertiary__link--hover--Color | #06c | |
| .pf-c-nav | --pf-c-nav--m-tertiary__link--focus--Color | #06c | |
| .pf-c-nav | --pf-c-nav--m-tertiary__link--active--Color | #06c | |
| .pf-c-nav | --pf-c-nav--m-tertiary__link--m-current--Color | #06c | |
| .pf-c-nav | --pf-c-nav--m-tertiary__link--BackgroundColor | transparent | |
| .pf-c-nav | --pf-c-nav--m-tertiary__link--hover--BackgroundColor | transparent | |
| .pf-c-nav | --pf-c-nav--m-tertiary__link--focus--BackgroundColor | transparent | |
| .pf-c-nav | --pf-c-nav--m-tertiary__link--active--BackgroundColor | transparent | |
| .pf-c-nav | --pf-c-nav--m-tertiary__link--m-current--BackgroundColor | transparent | |
| .pf-c-nav | --pf-c-nav--m-tertiary__link--before--BorderColor | #06c | |
| .pf-c-nav | --pf-c-nav--m-tertiary__link--before--BorderWidth | 0 | |
| .pf-c-nav | --pf-c-nav--m-tertiary__link--hover--before--BorderWidth | 3px | |
| .pf-c-nav | --pf-c-nav--m-tertiary__link--focus--before--BorderWidth | 3px | |
| .pf-c-nav | --pf-c-nav--m-tertiary__link--active--before--BorderWidth | 3px | |
| .pf-c-nav | --pf-c-nav--m-tertiary__link--m-current--before--BorderWidth | 3px | |
| .pf-c-nav | --pf-c-nav--m-tertiary__scroll-button--Color | #151515 | |
| .pf-c-nav | --pf-c-nav--m-tertiary__scroll-button--hover--Color | #06c | |
| .pf-c-nav | --pf-c-nav--m-tertiary__scroll-button--focus--Color | #06c | |
| .pf-c-nav | --pf-c-nav--m-tertiary__scroll-button--active--Color | #06c | |
| .pf-c-nav | --pf-c-nav--m-tertiary__scroll-button--disabled--Color | #d2d2d2 | |
| .pf-c-nav | --pf-c-nav--m-tertiary__scroll-button--before--BorderColor | #f0f0f0 | |
| .pf-c-nav | --pf-c-nav--m-tertiary__scroll-button--disabled--before--BorderColor | #f0f0f0 | |
| .pf-c-nav | --pf-c-nav__subnav--PaddingBottom | 1rem | |
| .pf-c-nav | --pf-c-nav__subnav--xl--PaddingLeft | 1rem | |
| .pf-c-nav | --pf-c-nav__subnav__link--MarginTop | 0 | |
| .pf-c-nav | --pf-c-nav__subnav__link--PaddingTop | 0.5rem | |
| .pf-c-nav | --pf-c-nav__subnav__link--PaddingRight | 1.5rem | |
| .pf-c-nav | --pf-c-nav__subnav__link--PaddingBottom | 0.5rem | |
| .pf-c-nav | --pf-c-nav__subnav__link--PaddingLeft | 1.5rem | |
| .pf-c-nav | --pf-c-nav__subnav__link--FontSize | 0.875rem | |
| .pf-c-nav | --pf-c-nav__subnav__link--hover--after--BorderColor | #8a8d90 | |
| .pf-c-nav | --pf-c-nav__subnav__link--focus--after--BorderColor | #8a8d90 | |
| .pf-c-nav | --pf-c-nav__subnav__link--active--after--BorderColor | #8a8d90 | |
| .pf-c-nav | --pf-c-nav__subnav__link--m-current--after--BorderColor | #73bcf7 | |
| .pf-c-nav | --pf-c-nav__subnav__link--hover--after--BorderWidth | 1px | |
| .pf-c-nav | --pf-c-nav__subnav__link--focus--after--BorderWidth | 1px | |
| .pf-c-nav | --pf-c-nav__subnav__link--active--after--BorderWidth | 1px | |
| .pf-c-nav | --pf-c-nav__subnav__link--m-current--after--BorderWidth | 4px | |
| .pf-c-nav | --pf-c-nav__subnav--MaxHeight | 0 | |
| .pf-c-nav | --pf-c-nav__item--m-expanded__subnav--MaxHeight | 100% | |
| .pf-c-nav | --pf-c-nav__subnav--c-divider--PaddingRight | 1.5rem | |
| .pf-c-nav | --pf-c-nav__subnav--c-divider--PaddingLeft | 1.5rem | |
| .pf-c-nav | --pf-c-nav__section--MarginTop | 0.5rem | |
| .pf-c-nav | --pf-c-nav__section__item--MarginTop | 0.5rem | |
| .pf-c-nav | --pf-c-nav__section__link--PaddingTop | 0.5rem | |
| .pf-c-nav | --pf-c-nav__section__link--PaddingRight | 1rem | |
| .pf-c-nav | --pf-c-nav__section__link--PaddingBottom | 0.5rem | |
| .pf-c-nav | --pf-c-nav__section__link--PaddingLeft | 1rem | |
| .pf-c-nav | --pf-c-nav__section__link--xl--PaddingRight | 1.5rem | |
| .pf-c-nav | --pf-c-nav__section__link--xl--PaddingLeft | 1.5rem | |
| .pf-c-nav | --pf-c-nav__section__link--FontSize | 1rem | |
| .pf-c-nav | --pf-c-nav__section__link--before--BorderBottomWidth | 0 | |
| .pf-c-nav | --pf-c-nav__section__link--hover--after--BorderColor | transparent | |
| .pf-c-nav | --pf-c-nav__section__link--focus--after--BorderColor | transparent | |
| .pf-c-nav | --pf-c-nav__section__link--active--after--BorderColor | transparent | |
| .pf-c-nav | --pf-c-nav__section__link--m-current--after--BorderColor | #73bcf7 | |
| .pf-c-nav | --pf-c-nav__section__link--hover--after--BorderWidth | 0 | |
| .pf-c-nav | --pf-c-nav__section__link--focus--after--BorderWidth | 0 | |
| .pf-c-nav | --pf-c-nav__section__link--active--after--BorderWidth | 0 | |
| .pf-c-nav | --pf-c-nav__section__link--m-current--after--BorderWidth | 4px | |
| .pf-c-nav | --pf-c-nav__section--section--MarginTop | 2rem | |
| .pf-c-nav | --pf-c-nav__section-title--PaddingTop | 0.5rem | |
| .pf-c-nav | --pf-c-nav__section-title--PaddingRight | 1rem | |
| .pf-c-nav | --pf-c-nav__section-title--PaddingBottom | 0.5rem | |
| .pf-c-nav | --pf-c-nav__section-title--PaddingLeft | 1rem | |
| .pf-c-nav | --pf-c-nav__section-title--xl--PaddingRight | 1.5rem | |
| .pf-c-nav | --pf-c-nav__section-title--xl--PaddingLeft | 1.5rem | |
| .pf-c-nav | --pf-c-nav__section-title--FontSize | 0.875rem | |
| .pf-c-nav | --pf-c-nav__section-title--Color | #fff | |
| .pf-c-nav | --pf-c-nav__section-title--BorderBottomColor | #3c3f42 | |
| .pf-c-nav | --pf-c-nav__section-title--BorderBottomWidth | 1px | |
| .pf-c-nav | --pf-c-nav__scroll-button--Color | #fff | |
| .pf-c-nav | --pf-c-nav__scroll-button--hover--Color | #73bcf7 | |
| .pf-c-nav | --pf-c-nav__scroll-button--focus--Color | #73bcf7 | |
| .pf-c-nav | --pf-c-nav__scroll-button--active--Color | #73bcf7 | |
| .pf-c-nav | --pf-c-nav__scroll-button--disabled--Color | #6a6e73 | |
| .pf-c-nav | --pf-c-nav__scroll-button--BackgroundColor | transparent | |
| .pf-c-nav | --pf-c-nav__scroll-button--Width | 44px | |
| .pf-c-nav | --pf-c-nav__scroll-button--OutlineOffset | calc(-1 * 0.25rem) | |
| .pf-c-nav | --pf-c-nav__scroll-button--Transition | margin .125s, transform .125s, opacity .125s | |
| .pf-c-nav | --pf-c-nav__scroll-button--before--BorderColor | #3c3f42 | |
| .pf-c-nav | --pf-c-nav__scroll-button--before--BorderWidth | 1px | |
| .pf-c-nav | --pf-c-nav__scroll-button--before--BorderRightWidth | 0 | |
| .pf-c-nav | --pf-c-nav__scroll-button--before--BorderLeftWidth | 0 | |
| .pf-c-nav | --pf-c-nav__scroll-button--disabled--before--BorderColor | transparent | |
| .pf-c-nav | --pf-c-nav__toggle--PaddingRight | 0.5rem | |
| .pf-c-nav | --pf-c-nav__toggle--PaddingLeft | 0.5rem | |
| .pf-c-nav | --pf-c-nav__toggle--FontSize | 1.125rem | |
| .pf-c-nav | --pf-c-nav__toggle-icon--Transition | 250ms | |
| .pf-c-nav | --pf-c-nav--c-divider--MarginTop | 0.5rem | |
| .pf-c-nav | --pf-c-nav--c-divider--MarginBottom | 0.5rem | |
| .pf-c-nav | --pf-c-nav--c-divider--PaddingRight | 0 | |
| .pf-c-nav | --pf-c-nav--c-divider--PaddingLeft | 0 | |
| .pf-c-nav | --pf-c-nav--c-divider--BackgroundColor | #3c3f42 | |
| .pf-c-nav | --pf-c-nav__list--ScrollSnapTypeAxis | x | |
| .pf-c-nav | --pf-c-nav__list--ScrollSnapTypeStrictness | proximity | |
| .pf-c-nav | --pf-c-nav__list--ScrollSnapType | x proximity | |
| .pf-c-nav | --pf-c-nav__item--ScrollSnapAlign | end | |
| .pf-c-nav.pf-m-light | --pf-c-nav__item--before--BorderColor | #f0f0f0 | |
| .pf-c-nav.pf-m-light | --pf-c-nav__item--m-current--not--m-expanded__link--BackgroundColor | #f0f0f0 | |
| .pf-c-nav.pf-m-light | --pf-c-nav__link--Color | #151515 | |
| .pf-c-nav.pf-m-light | --pf-c-nav__link--hover--Color | #151515 | |
| .pf-c-nav.pf-m-light | --pf-c-nav__link--focus--Color | #151515 | |
| .pf-c-nav.pf-m-light | --pf-c-nav__link--active--Color | #151515 | |
| .pf-c-nav.pf-m-light | --pf-c-nav__link--m-current--Color | #151515 | |
| .pf-c-nav.pf-m-light | --pf-c-nav__link--hover--BackgroundColor | #f0f0f0 | |
| .pf-c-nav.pf-m-light | --pf-c-nav__link--focus--BackgroundColor | #f0f0f0 | |
| .pf-c-nav.pf-m-light | --pf-c-nav__link--active--BackgroundColor | #f0f0f0 | |
| .pf-c-nav.pf-m-light | --pf-c-nav__link--m-current--BackgroundColor | #f0f0f0 | |
| .pf-c-nav.pf-m-light | --pf-c-nav__link--before--BorderColor | #f0f0f0 | |
| .pf-c-nav.pf-m-light | --pf-c-nav__link--after--BorderColor | #06c | |
| .pf-c-nav.pf-m-light | --pf-c-nav__link--m-current--after--BorderColor | #06c | |
| .pf-c-nav.pf-m-light | --pf-c-nav__subnav__link--hover--after--BorderColor | #d2d2d2 | |
| .pf-c-nav.pf-m-light | --pf-c-nav__subnav__link--focus--after--BorderColor | #d2d2d2 | |
| .pf-c-nav.pf-m-light | --pf-c-nav__subnav__link--active--after--BorderColor | #d2d2d2 | |
| .pf-c-nav.pf-m-light | --pf-c-nav__subnav__link--m-current--after--BorderColor | #06c | |
| .pf-c-nav.pf-m-light | --pf-c-nav__section-title--Color | #6a6e73 | |
| .pf-c-nav.pf-m-light | --pf-c-nav__section-title--BorderBottomColor | #f0f0f0 | |
| .pf-c-nav.pf-m-light .pf-c-divider | --pf-c-divider--after--BackgroundColor | #f0f0f0 | |
| .pf-c-nav.pf-m-horizontal | --pf-c-nav__link--PaddingTop | 0.5rem | |
| .pf-c-nav.pf-m-horizontal | --pf-c-nav__link--PaddingRight | 1rem | |
| .pf-c-nav.pf-m-horizontal | --pf-c-nav__link--PaddingBottom | 0.5rem | |
| .pf-c-nav.pf-m-horizontal | --pf-c-nav__link--PaddingLeft | 1rem | |
| .pf-c-nav.pf-m-horizontal | --pf-c-nav__link--Right | 1rem | |
| .pf-c-nav.pf-m-horizontal | --pf-c-nav__link--Left | 1rem | |
| .pf-c-nav.pf-m-horizontal | --pf-c-nav__link--Color | #d2d2d2 | |
| .pf-c-nav.pf-m-horizontal | --pf-c-nav__link--hover--Color | #73bcf7 | |
| .pf-c-nav.pf-m-horizontal | --pf-c-nav__link--active--Color | #73bcf7 | |
| .pf-c-nav.pf-m-horizontal | --pf-c-nav__link--focus--Color | #73bcf7 | |
| .pf-c-nav.pf-m-horizontal | --pf-c-nav__link--m-current--Color | #73bcf7 | |
| .pf-c-nav.pf-m-horizontal | --pf-c-nav__link--BackgroundColor | transparent | |
| .pf-c-nav.pf-m-horizontal | --pf-c-nav__link--hover--BackgroundColor | transparent | |
| .pf-c-nav.pf-m-horizontal | --pf-c-nav__link--focus--BackgroundColor | transparent | |
| .pf-c-nav.pf-m-horizontal | --pf-c-nav__link--active--BackgroundColor | transparent | |
| .pf-c-nav.pf-m-horizontal | --pf-c-nav__link--m-current--BackgroundColor | transparent | |
| .pf-c-nav.pf-m-horizontal | --pf-c-nav__link--before--BorderColor | #73bcf7 | |
| .pf-c-nav.pf-m-horizontal | --pf-c-nav__link--before--BorderBottomWidth | 0 | |
| .pf-c-nav.pf-m-horizontal | --pf-c-nav__link--hover--before--BorderBottomWidth | 3px | |
| .pf-c-nav.pf-m-horizontal | --pf-c-nav__link--focus--before--BorderBottomWidth | 3px | |
| .pf-c-nav.pf-m-horizontal | --pf-c-nav__link--active--before--BorderBottomWidth | 3px | |
| .pf-c-nav.pf-m-horizontal | --pf-c-nav__link--m-current--before--BorderBottomWidth | 3px | |
| .pf-c-nav.pf-m-tertiary | --pf-c-nav__link--PaddingTop | 0.5rem | |
| .pf-c-nav.pf-m-tertiary | --pf-c-nav__link--PaddingRight | 1rem | |
| .pf-c-nav.pf-m-tertiary | --pf-c-nav__link--PaddingBottom | 0.5rem | |
| .pf-c-nav.pf-m-tertiary | --pf-c-nav__link--PaddingLeft | 1rem | |
| .pf-c-nav.pf-m-tertiary | --pf-c-nav__link--Right | 1rem | |
| .pf-c-nav.pf-m-tertiary | --pf-c-nav__link--Left | 1rem | |
| .pf-c-nav.pf-m-tertiary | --pf-c-nav__link--Color | #151515 | |
| .pf-c-nav.pf-m-tertiary | --pf-c-nav__link--hover--Color | #06c | |
| .pf-c-nav.pf-m-tertiary | --pf-c-nav__link--active--Color | #06c | |
| .pf-c-nav.pf-m-tertiary | --pf-c-nav__link--focus--Color | #06c | |
| .pf-c-nav.pf-m-tertiary | --pf-c-nav__link--m-current--Color | #06c | |
| .pf-c-nav.pf-m-tertiary | --pf-c-nav__link--BackgroundColor | transparent | |
| .pf-c-nav.pf-m-tertiary | --pf-c-nav__link--hover--BackgroundColor | transparent | |
| .pf-c-nav.pf-m-tertiary | --pf-c-nav__link--focus--BackgroundColor | transparent | |
| .pf-c-nav.pf-m-tertiary | --pf-c-nav__link--active--BackgroundColor | transparent | |
| .pf-c-nav.pf-m-tertiary | --pf-c-nav__link--m-current--BackgroundColor | transparent | |
| .pf-c-nav.pf-m-tertiary | --pf-c-nav__link--before--BorderColor | #06c | |
| .pf-c-nav.pf-m-tertiary | --pf-c-nav__link--before--BorderBottomWidth | 0 | |
| .pf-c-nav.pf-m-tertiary | --pf-c-nav__link--hover--before--BorderBottomWidth | 3px | |
| .pf-c-nav.pf-m-tertiary | --pf-c-nav__link--focus--before--BorderBottomWidth | 3px | |
| .pf-c-nav.pf-m-tertiary | --pf-c-nav__link--active--before--BorderBottomWidth | 3px | |
| .pf-c-nav.pf-m-tertiary | --pf-c-nav__link--m-current--before--BorderBottomWidth | 3px | |