Examples
Grouped
Note: to keep nav groups accessible an aria-label should be supplied if the title prop is not passed.
Flyout Beta
A flyout should be a Menu component. Press space or right arrow to open a flyout using the keyboard, use the arrow keys to navigate between flyout items, and press escape or left arrow to close a flyout.
Props
Nav
| Name | Type | Default | Description |
|---|---|---|---|
| aria-label | string | Accessibility label | |
| children | React.ReactNode | Anything that can be rendered inside of the nav | |
| className | string | Additional classes added to the container | |
| onSelect | (selectedItem: { groupId: number | string; itemId: number | string; to: string; event: React.FormEvent<HTMLInputElement>; }) => void | () => undefined | Callback for updating when item selection changes |
| onToggle | (toggledItem: { groupId: number | string; isExpanded: boolean; event: React.MouseEvent<HTMLButtonElement>; }) => void | () => undefined | Callback for when a list is expanded or collapsed |
| ouiaSafe | No type info | true | |
| theme | 'dark' | 'light' | 'dark' | Indicates which theme color to use |
| variant | 'default' | 'horizontal' | 'tertiary' | 'horizontal-subnav' | For horizontal navs |
NavList
| Name | Type | Default | Description |
|---|---|---|---|
| ariaLeftScroll | string | 'Scroll left' | Aria-label for the left scroll button |
| ariaRightScroll | string | 'Scroll right' | Aria-label for the right scroll button |
| children | React.ReactNode | Children nodes | |
| className | string | Additional classes added to the list |
NavGroup
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | null | Anything that can be rendered inside of the group |
| className | string | '' | Additional classes added to the container |
| id | string | getUniqueId() | Identifier to use for the section aria label |
| title | string | Title shown for the group |
NavItem
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content rendered inside the nav item. | |
| className | string | Additional classes added to the nav item | |
| component | React.ReactNode | 'a' | Component used to render NavItems if React.isValidElement(children) is false |
| flyout | React.ReactElement | Flyout of a nav item. This should be a Menu component. | |
| groupId | string | number | null | null | Group identifier, will be returned with the onToggle and onSelect callback passed to the Nav component |
| isActive | boolean | false | Flag indicating whether the item is active |
| itemId | string | number | null | null | Item identifier, will be returned with the onToggle and onSelect callback passed to the Nav component |
| onClick | NavSelectClickHandler | null | Callback for item click |
| onShowFlyout | () => void | Callback when flyout is opened or closed | |
| preventDefault | boolean | false | If true prevents the default anchor link action to occur. Set to true if you want to handle navigation yourself. |
| styleChildren | boolean | true | Whether to set className on children when React.isValidElement(children) |
| to | string | Target navigation link |
NavItemSeparator
| Name | Type | Default | Description |
|---|---|---|---|
| component | No type info | 'li' |
NavExpandable
| Name | Type | Default | Description |
|---|---|---|---|
| titlerequired | string | Title shown for the expandable list | |
| buttonProps | any | Additional props added to the NavExpandable <button> | |
| children | React.ReactNode | '' | Anything that can be rendered inside of the expandable list |
| className | string | '' | Additional classes added to the container |
| groupId | string | number | null | Group identifier, will be returned with the onToggle and onSelect callback passed to the Nav component |
| id | string | '' | Identifier to use for the section aria label |
| isActive | boolean | false | If true makes the expandable list title active |
| isExpanded | boolean | false | Boolean to programatically expand or collapse section |
| onExpand | (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, val: boolean) => void | allow consumer to optionally override this callback and manage expand state externally. if passed will not call Nav's onToggle. | |
| srText | string | '' | If defined, screen readers will read this text instead of the list title |
CSS variables
| .pf-c-nav | --pf-c-nav--Transition | all 250ms cubic-bezier(.42, 0, .58, 1) | ||
| .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__item__link--PaddingRight | 2rem | ||
| .pf-c-nav | --pf-c-nav__item__item__toggle--FontSize | 0.875rem | ||
| .pf-c-nav | --pf-c-nav__item__toggle-icon--Rotate | 0 | ||
| .pf-c-nav | --pf-c-nav__item--m-expanded__toggle-icon--Rotate | 90deg | ||
| .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--m-horizontal-subnav__link--PaddingTop | 0.5rem | ||
| .pf-c-nav | --pf-c-nav--m-horizontal-subnav__link--PaddingRight | 1rem | ||
| .pf-c-nav | --pf-c-nav--m-horizontal-subnav__link--PaddingBottom | 0.5rem | ||
| .pf-c-nav | --pf-c-nav--m-horizontal-subnav__link--PaddingLeft | 1rem | ||
| .pf-c-nav | --pf-c-nav--m-horizontal-subnav__link--xl--PaddingTop | 1rem | ||
| .pf-c-nav | --pf-c-nav--m-horizontal-subnav__link--xl--PaddingRight | 1.5rem | ||
| .pf-c-nav | --pf-c-nav--m-horizontal-subnav__link--xl--PaddingBottom | 1rem | ||
| .pf-c-nav | --pf-c-nav--m-horizontal-subnav__link--xl--PaddingLeft | 1.5rem | ||
| .pf-c-nav | --pf-c-nav--m-horizontal-subnav__link--FontSize | 0.875rem | ||
| .pf-c-nav | --pf-c-nav--m-horizontal-subnav__link--Color | #f0f0f0 | ||
| .pf-c-nav | --pf-c-nav--m-horizontal-subnav__link--hover--Color | #fff | ||
| .pf-c-nav | --pf-c-nav--m-horizontal-subnav__link--focus--Color | #fff | ||
| .pf-c-nav | --pf-c-nav--m-horizontal-subnav__link--active--Color | #fff | ||
| .pf-c-nav | --pf-c-nav--m-horizontal-subnav__link--m-current--Color | #fff | ||
| .pf-c-nav | --pf-c-nav--m-horizontal-subnav__link--BackgroundColor | transparent | ||
| .pf-c-nav | --pf-c-nav--m-horizontal-subnav__link--hover--BackgroundColor | #3c3f42 | ||
| .pf-c-nav | --pf-c-nav--m-horizontal-subnav__link--focus--BackgroundColor | #3c3f42 | ||
| .pf-c-nav | --pf-c-nav--m-horizontal-subnav__link--active--BackgroundColor | #3c3f42 | ||
| .pf-c-nav | --pf-c-nav--m-horizontal-subnav__link--m-current--BackgroundColor | #4f5255 | ||
| .pf-c-nav | --pf-c-nav--m-horizontal-subnav__link--before--BorderColor | transparent | ||
| .pf-c-nav | --pf-c-nav--m-horizontal-subnav__link--after--BorderColor | #3c3f42 | ||
| .pf-c-nav | --pf-c-nav--m-horizontal-subnav__link--hover--after--BorderColor | #3c3f42 | ||
| .pf-c-nav | --pf-c-nav--m-horizontal-subnav__link--active--after--BorderColor | #3c3f42 | ||
| .pf-c-nav | --pf-c-nav--m-horizontal-subnav__link--m-current--after--BorderColor | #3c3f42 | ||
| .pf-c-nav | --pf-c-nav--m-horizontal-subnav__link--after--BorderLeftWidth | 1px | ||
| .pf-c-nav | --pf-c-nav--m-horizontal-subnav__link--hover--after--BorderLeftWidth | 1px | ||
| .pf-c-nav | --pf-c-nav--m-horizontal-subnav__link--active--after--BorderLeftWidth | 1px | ||
| .pf-c-nav | --pf-c-nav--m-horizontal-subnav__link--m-current--after--BorderLeftWidth | 1px | ||
| .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__subnav__subnav--PaddingLeft | 1.5rem | ||
| .pf-c-nav | --pf-c-nav__subnav__subnav__link--PaddingLeft | 1rem | ||
| .pf-c-nav | --pf-c-nav__subnav__subnav__link--FontSize | 0.75rem | ||
| .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-c-nav__item--m-flyout--c-menu--top-offset | 0px | ||
| .pf-c-nav | --pf-c-nav__item--m-flyout--c-menu--left-offset | 0.25rem | ||
| .pf-c-nav | --pf-c-nav__item--m-flyout--c-menu--m-top--bottom-offset | 0px | ||
| .pf-c-nav | --pf-c-nav__item--m-flyout--c-menu--m-left--right-offset | 0.25rem | ||
| .pf-c-nav | --pf-c-nav__item--m-flyout--MarginTop | 0 | ||
| .pf-c-nav | --pf-c-nav__item--m-flyout--hover__link--BackgroundColor | #3c3f42 | ||
| .pf-c-nav | --pf-c-nav__item--m-flyout--focus__link--BackgroundColor | #3c3f42 | ||
| .pf-c-nav | --pf-c-nav__item--m-flyout--active__link--BackgroundColor | #3c3f42 | ||
| .pf-c-nav | --pf-c-nav__item--m-flyout--hover__link--before--BorderWidth | 0 | ||
| .pf-c-nav | --pf-c-nav__item--m-flyout--focus__link--before--BorderWidth | 0 | ||
| .pf-c-nav | --pf-c-nav__item--m-flyout--active__link--before--BorderWidth | 0 | ||
| .pf-c-nav | --pf-c-nav__item--m-flyout__item--last-child__link--before--BorderBottomWidth | 0 | ||
| .pf-c-nav | --pf-c-nav__item--m-flyout--c-menu--Top | calc(0px + 0px) | ||
| .pf-c-nav | --pf-c-nav__item--m-flyout--c-menu--c-menu--Top | calc(calc(0px + 0px) - 1px) | ||
| .pf-c-nav | --pf-c-nav__item--m-flyout--c-menu__list-item--first-child--c-menu--Top | 0 | ||
| .pf-c-nav | --pf-c-nav__item--m-flyout--c-menu--Left | calc(100% - 0.25rem) | ||
| .pf-c-nav | --pf-c-nav__item--m-flyout--c-menu--m-left--Right | calc(100% - 0.25rem) | ||
| .pf-c-nav | --pf-c-nav__item--m-flyout--c-menu--m-top--Bottom | calc(0 + 0px) | ||
| .pf-c-nav | --pf-c-nav__item--m-flyout--c-menu--BackgroundColor | #212427 | ||
| .pf-c-nav | --pf-c-nav__item--m-flyout--c-menu__item--Color | #fff | ||
| .pf-c-nav | --pf-c-nav__item--m-flyout--c-menu__item--PaddingTop | 0.5rem | ||
| .pf-c-nav | --pf-c-nav__item--m-flyout--c-menu__item--PaddingRight | 1.5rem | ||
| .pf-c-nav | --pf-c-nav__item--m-flyout--c-menu__item--PaddingBottom | 0.5rem | ||
| .pf-c-nav | --pf-c-nav__item--m-flyout--c-menu__item--PaddingLeft | 1.5rem | ||