Examples
Grouped
The following example shows two navigation groups, each with a title
prop passed into the nav group component. To keep nav groups accessible an aria-label
must be passed in if the title
prop is not passed in.
Beta
FlyoutA 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 | Accessible label for the nav when there are multiple navs on the page | |
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 |
ouiaId | number | string | Value to overwrite the randomly generated data-ouia-component-id. | |
ouiaSafe | boolean | true | Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. |
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. Should not be used if the to prop is defined. | |
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 | |
ouiaId | number | string | Value to overwrite the randomly generated data-ouia-component-id. | |
ouiaSafe | boolean | Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. | |
preventDefault | boolean | false | If true prevents the default anchor link action to occur. Set to true if you want to handle navigation yourself. |
removeFindDomNodeBeta | boolean | false | Opt-in for updated popper that does not use findDOMNode. |
styleChildren | boolean | true | Whether to set className on children when React.isValidElement(children) |
to | string | Target navigation link. Should not be used if the flyout prop is defined. | |
zIndex | number | 9999 | z-index of the flyout nav item |
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. | |
ouiaId | number | string | Value to overwrite the randomly generated data-ouia-component-id. | |
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 | ||
.pf-c-nav | --pf-c-nav__item--m-flyout--c-menu__item-description--Color | #f0f0f0 | ||