Skip to content
PatternFly

Navigation

A navigation organizes an application's structure and content, making it easy to find information and accomplish tasks. Navigation communicates relationships, context, and actions a user can take within an application.

Examples

Default

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.

Expandable

Expandable third level

Mixed

Horizontal subnav

Tertiary (deprecated)

Flyout

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.

Drilldown

Link text

Types

The NavItem onClick prop accepts the NavSelectClickHandler type, which is made up of the following argument and return types:

(
  event: React.FormEvent<HTMLInputElement>,
  itemId: number | string,
  groupId: number | string,
  to: string
) => void;

Props

*required
NameTypeDefaultDescription
aria-labelstringAccessible label for the nav when there are multiple navs on the page
childrenReact.ReactNodeAnything that can be rendered inside of the nav
classNamestringAdditional classes added to the container
onSelect( event: React.FormEvent<HTMLInputElement>, selectedItem: { groupId: number | string; itemId: number | string; to: string; } ) => void() => undefinedCallback for updating when item selection changes
onToggle( event: React.MouseEvent<HTMLButtonElement>, toggledItem: { groupId: number | string; isExpanded: boolean; } ) => void() => undefinedCallback for when a list is expanded or collapsed
ouiaIdnumber | stringValue to overwrite the randomly generated data-ouia-component-id.
ouiaSafebooleantrueSet 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
*required
NameTypeDefaultDescription
Deprecated: ariaLeftScrollstring'Scroll left'Please use backScrollAriaLabel. Aria-label for the left scroll button
Deprecated: ariaRightScrollstring'Scroll right'Please use forwardScrollAriaLabel. Aria-label for the right scroll button
backScrollAriaLabelstring'Scroll back'Aria-label for the back scroll button
childrenReact.ReactNodeChildren nodes
classNamestringAdditional classes added to the list
forwardScrollAriaLabelstring'Scroll foward'Aria-label for the forward scroll button
*required
NameTypeDefaultDescription
childrenReact.ReactNodenullAnything that can be rendered inside of the group
classNamestring''Additional classes added to the container
idstringgetUniqueId()Identifier to use for the section aria label
titlestringTitle shown for the group
*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside the nav item.
classNamestringAdditional classes added to the nav item
componentReact.ElementType<any> | React.ComponentType<any>'a'Component used to render NavItems if React.isValidElement(children) is false
flyoutReact.ReactElementFlyout of a nav item. This should be a Menu component. Should not be used if the to prop is defined.
groupIdstring | number | nullnullGroup identifier, will be returned with the onToggle and onSelect callback passed to the Nav component
hasNavLinkWrapperBetabooleanAdds a wrapper around the nav link text. Improves the layout when the text is a react node.
isActivebooleanfalseFlag indicating whether the item is active
itemIdstring | number | nullnullItem identifier, will be returned with the onToggle and onSelect callback passed to the Nav component
onClickNavSelectClickHandlerCallback for item click
onShowFlyout() => voidCallback when flyout is opened or closed
ouiaIdnumber | stringValue to overwrite the randomly generated data-ouia-component-id.
ouiaSafebooleanSet 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.
preventDefaultbooleanfalseIf true prevents the default anchor link action to occur. Set to true if you want to handle navigation yourself.
styleChildrenbooleantrueWhether to set className on children when React.isValidElement(children)
tostringTarget navigation link. Should not be used if the flyout prop is defined.
zIndexnumber9999z-index of the flyout nav item
*required
NameTypeDefaultDescription
componentNo type info'li'
*required
NameTypeDefaultDescription
titlerequiredReact.ReactNodeTitle content shown for the expandable list
buttonPropsanyAdditional props added to the NavExpandable <button>
childrenReact.ReactNode''Anything that can be rendered inside of the expandable list
classNamestring''Additional classes added to the container
groupIdstring | numbernullGroup identifier, will be returned with the onToggle and onSelect callback passed to the Nav component
idstring''Identifier to use for the section aria label
isActivebooleanfalseIf true makes the expandable list title active
isExpandedbooleanfalseBoolean to programatically expand or collapse section
onExpand(event: React.MouseEvent<HTMLButtonElement, MouseEvent>, val: boolean) => voidallow consumer to optionally override this callback and manage expand state externally. if passed will not call Nav's onToggle.
ouiaIdnumber | stringValue to overwrite the randomly generated data-ouia-component-id.
srTextstring''If defined, screen readers will read this text instead of the list title

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v5-c-nav--pf-v5-c-nav--Transition
all 250ms cubic-bezier(.42, 0, .58, 1)
.pf-v5-c-nav--pf-v5-c-nav--m-light__item--before--BorderColor
#f0f0f0
.pf-v5-c-nav--pf-v5-c-nav--m-light__item--m-current--not--m-expanded__link--BackgroundColor
#f0f0f0
.pf-v5-c-nav--pf-v5-c-nav--m-light__link--Color
#151515
.pf-v5-c-nav--pf-v5-c-nav--m-light__link--hover--Color
#151515
.pf-v5-c-nav--pf-v5-c-nav--m-light__link--focus--Color
#151515
.pf-v5-c-nav--pf-v5-c-nav--m-light__link--active--Color
#151515
.pf-v5-c-nav--pf-v5-c-nav--m-light__link--m-current--Color
#151515
.pf-v5-c-nav--pf-v5-c-nav--m-light__link--hover--BackgroundColor
#f0f0f0
.pf-v5-c-nav--pf-v5-c-nav--m-light__link--focus--BackgroundColor
#f0f0f0
.pf-v5-c-nav--pf-v5-c-nav--m-light__link--active--BackgroundColor
#f0f0f0
.pf-v5-c-nav--pf-v5-c-nav--m-light__link--m-current--BackgroundColor
#f0f0f0
.pf-v5-c-nav--pf-v5-c-nav--m-light__link--before--BorderColor
#f0f0f0
.pf-v5-c-nav--pf-v5-c-nav--m-light__link--after--BorderColor
#06c
.pf-v5-c-nav--pf-v5-c-nav--m-light__link--m-current--after--BorderColor
#06c
.pf-v5-c-nav--pf-v5-c-nav--m-light__section-title--Color
#6a6e73
.pf-v5-c-nav--pf-v5-c-nav--m-light__section-title--BorderBottomColor
#f0f0f0
.pf-v5-c-nav--pf-v5-c-nav--m-light--c-divider--BackgroundColor
#f0f0f0
.pf-v5-c-nav--pf-v5-c-nav--m-light__subnav__link--hover--after--BorderColor
#d2d2d2
.pf-v5-c-nav--pf-v5-c-nav--m-light__subnav__link--focus--after--BorderColor
#d2d2d2
.pf-v5-c-nav--pf-v5-c-nav--m-light__subnav__link--active--after--BorderColor
#d2d2d2
.pf-v5-c-nav--pf-v5-c-nav--m-light__subnav__link--m-current--after--BorderColor
#06c
.pf-v5-c-nav--pf-v5-c-nav__list--PaddingTop
0.5rem
.pf-v5-c-nav--pf-v5-c-nav__list--PaddingBottom
0.5rem
.pf-v5-c-nav--pf-v5-c-nav__item--MarginTop
0
.pf-v5-c-nav--pf-v5-c-nav__item--m-current--not--m-expanded__link--BackgroundColor
#4f5255
.pf-v5-c-nav--pf-v5-c-nav__link--m-current--not--m-expanded__link--after--BorderWidth
4px
.pf-v5-c-nav--pf-v5-c-nav__item__item__link--PaddingRight
2rem
.pf-v5-c-nav--pf-v5-c-nav__item__item__toggle--FontSize
0.875rem
.pf-v5-c-nav--pf-v5-c-nav__item__toggle-icon--Rotate
0
.pf-v5-c-nav--pf-v5-c-nav__item--m-expanded__toggle-icon--Rotate
90deg
.pf-v5-c-nav--pf-v5-c-nav__item--before--BorderColor
#3c3f42
.pf-v5-c-nav--pf-v5-c-nav__item--before--BorderWidth
1px
.pf-v5-c-nav--pf-v5-c-nav__link--FontSize
1rem
.pf-v5-c-nav--pf-v5-c-nav__link--FontWeight
400
.pf-v5-c-nav--pf-v5-c-nav__link--PaddingTop
1rem
.pf-v5-c-nav--pf-v5-c-nav__link--PaddingRight
1rem
.pf-v5-c-nav--pf-v5-c-nav__link--PaddingBottom
1rem
.pf-v5-c-nav--pf-v5-c-nav__link--PaddingLeft
1rem
.pf-v5-c-nav--pf-v5-c-nav__link--xl--PaddingRight
1.5rem
.pf-v5-c-nav--pf-v5-c-nav__link--xl--PaddingLeft
1.5rem
.pf-v5-c-nav--pf-v5-c-nav__link--Color
#fff
.pf-v5-c-nav--pf-v5-c-nav__link--hover--Color
#fff
.pf-v5-c-nav--pf-v5-c-nav__link--focus--Color
#fff
.pf-v5-c-nav--pf-v5-c-nav__link--active--Color
#fff
.pf-v5-c-nav--pf-v5-c-nav__link--m-current--Color
#fff
.pf-v5-c-nav--pf-v5-c-nav__link--BackgroundColor
transparent
.pf-v5-c-nav--pf-v5-c-nav__link--hover--BackgroundColor
#3c3f42
.pf-v5-c-nav--pf-v5-c-nav__link--focus--BackgroundColor
#3c3f42
.pf-v5-c-nav--pf-v5-c-nav__link--active--BackgroundColor
#3c3f42
.pf-v5-c-nav--pf-v5-c-nav__link--m-current--BackgroundColor
#4f5255
.pf-v5-c-nav--pf-v5-c-nav__link--OutlineOffset
calc(0.25rem * -1)
.pf-v5-c-nav--pf-v5-c-nav__link--before--BorderColor
#3c3f42
.pf-v5-c-nav--pf-v5-c-nav__link--before--BorderBottomWidth
1px
.pf-v5-c-nav--pf-v5-c-nav__link--hover--before--BorderBottomWidth
0
.pf-v5-c-nav--pf-v5-c-nav__link--focus--before--BorderBottomWidth
0
.pf-v5-c-nav--pf-v5-c-nav__link--active--before--BorderBottomWidth
0
.pf-v5-c-nav--pf-v5-c-nav__link--m-current--before--BorderBottomWidth
0
.pf-v5-c-nav--pf-v5-c-nav__link--after--BorderColor
#73bcf7
.pf-v5-c-nav--pf-v5-c-nav__link--hover--after--BorderColor
#73bcf7
.pf-v5-c-nav--pf-v5-c-nav__link--focus--after--BorderColor
#73bcf7
.pf-v5-c-nav--pf-v5-c-nav__link--active--after--BorderColor
#73bcf7
.pf-v5-c-nav--pf-v5-c-nav__link--m-current--after--BorderColor
#73bcf7
.pf-v5-c-nav--pf-v5-c-nav__link--after--BorderLeftWidth
0
.pf-v5-c-nav--pf-v5-c-nav__link--hover--after--BorderLeftWidth
0
.pf-v5-c-nav--pf-v5-c-nav__link--focus--after--BorderLeftWidth
0
.pf-v5-c-nav--pf-v5-c-nav__link--active--after--BorderLeftWidth
0
.pf-v5-c-nav--pf-v5-c-nav__link--m-current--after--BorderLeftWidth
4px
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal__link--PaddingTop
0.5rem
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal__link--PaddingRight
1rem
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal__link--PaddingBottom
0.5rem
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal__link--PaddingLeft
1rem
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal__link--lg--PaddingTop
1.5rem
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal__link--lg--PaddingBottom
1.5rem
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal__link--Right
1rem
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal__link--Left
1rem
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal__link--Color
#f0f0f0
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal__link--hover--Color
#73bcf7
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal__link--focus--Color
#73bcf7
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal__link--active--Color
#73bcf7
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal__link--m-current--Color
#73bcf7
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal__link--BackgroundColor
transparent
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal__link--hover--BackgroundColor
transparent
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal__link--focus--BackgroundColor
transparent
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal__link--active--BackgroundColor
transparent
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal__link--m-current--BackgroundColor
transparent
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal__link--before--BorderColor
#73bcf7
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal__link--before--BorderWidth
0
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal__link--hover--before--BorderWidth
3px
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal__link--focus--before--BorderWidth
3px
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal__link--active--before--BorderWidth
3px
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal__link--m-current--before--BorderWidth
3px
.pf-v5-c-nav--pf-v5-c-nav--m-tertiary__link--PaddingTop
0.5rem
.pf-v5-c-nav--pf-v5-c-nav--m-tertiary__link--PaddingRight
1rem
.pf-v5-c-nav--pf-v5-c-nav--m-tertiary__link--PaddingBottom
0.5rem
.pf-v5-c-nav--pf-v5-c-nav--m-tertiary__link--PaddingLeft
1rem
.pf-v5-c-nav--pf-v5-c-nav--m-tertiary__link--Right
1rem
.pf-v5-c-nav--pf-v5-c-nav--m-tertiary__link--Left
1rem
.pf-v5-c-nav--pf-v5-c-nav--m-tertiary__link--Color
#151515
.pf-v5-c-nav--pf-v5-c-nav--m-tertiary__link--hover--Color
#06c
.pf-v5-c-nav--pf-v5-c-nav--m-tertiary__link--focus--Color
#06c
.pf-v5-c-nav--pf-v5-c-nav--m-tertiary__link--active--Color
#06c
.pf-v5-c-nav--pf-v5-c-nav--m-tertiary__link--m-current--Color
#06c
.pf-v5-c-nav--pf-v5-c-nav--m-tertiary__link--BackgroundColor
transparent
.pf-v5-c-nav--pf-v5-c-nav--m-tertiary__link--hover--BackgroundColor
transparent
.pf-v5-c-nav--pf-v5-c-nav--m-tertiary__link--focus--BackgroundColor
transparent
.pf-v5-c-nav--pf-v5-c-nav--m-tertiary__link--active--BackgroundColor
transparent
.pf-v5-c-nav--pf-v5-c-nav--m-tertiary__link--m-current--BackgroundColor
transparent
.pf-v5-c-nav--pf-v5-c-nav--m-tertiary__link--before--BorderColor
#06c
.pf-v5-c-nav--pf-v5-c-nav--m-tertiary__link--before--BorderWidth
0
.pf-v5-c-nav--pf-v5-c-nav--m-tertiary__link--hover--before--BorderWidth
3px
.pf-v5-c-nav--pf-v5-c-nav--m-tertiary__link--focus--before--BorderWidth
3px
.pf-v5-c-nav--pf-v5-c-nav--m-tertiary__link--active--before--BorderWidth
3px
.pf-v5-c-nav--pf-v5-c-nav--m-tertiary__link--m-current--before--BorderWidth
3px
.pf-v5-c-nav--pf-v5-c-nav--m-tertiary__scroll-button--Color
#151515
.pf-v5-c-nav--pf-v5-c-nav--m-tertiary__scroll-button--hover--Color
#06c
.pf-v5-c-nav--pf-v5-c-nav--m-tertiary__scroll-button--focus--Color
#06c
.pf-v5-c-nav--pf-v5-c-nav--m-tertiary__scroll-button--active--Color
#06c
.pf-v5-c-nav--pf-v5-c-nav--m-tertiary__scroll-button--disabled--Color
#d2d2d2
.pf-v5-c-nav--pf-v5-c-nav--m-tertiary__scroll-button--before--BorderColor
#f0f0f0
.pf-v5-c-nav--pf-v5-c-nav--m-tertiary__scroll-button--disabled--before--BorderColor
#f0f0f0
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal-subnav__link--PaddingTop
0.5rem
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal-subnav__link--PaddingRight
1rem
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal-subnav__link--PaddingBottom
0.5rem
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal-subnav__link--PaddingLeft
1rem
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal-subnav__link--xl--PaddingTop
1rem
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal-subnav__link--xl--PaddingRight
1.5rem
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal-subnav__link--xl--PaddingBottom
1rem
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal-subnav__link--xl--PaddingLeft
1.5rem
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal-subnav__link--FontSize
0.875rem
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal-subnav__link--Color
#f0f0f0
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal-subnav__link--hover--Color
#fff
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal-subnav__link--focus--Color
#fff
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal-subnav__link--active--Color
#fff
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal-subnav__link--m-current--Color
#fff
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal-subnav__link--BackgroundColor
transparent
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal-subnav__link--hover--BackgroundColor
#3c3f42
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal-subnav__link--focus--BackgroundColor
#3c3f42
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal-subnav__link--active--BackgroundColor
#3c3f42
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal-subnav__link--m-current--BackgroundColor
#4f5255
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal-subnav__link--before--BorderColor
transparent
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal-subnav__link--after--BorderColor
#3c3f42
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal-subnav__link--hover--after--BorderColor
#3c3f42
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal-subnav__link--active--after--BorderColor
#3c3f42
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal-subnav__link--m-current--after--BorderColor
#3c3f42
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal-subnav__link--after--BorderLeftWidth
1px
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal-subnav__link--hover--after--BorderLeftWidth
1px
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal-subnav__link--active--after--BorderLeftWidth
1px
.pf-v5-c-nav--pf-v5-c-nav--m-horizontal-subnav__link--m-current--after--BorderLeftWidth
1px
.pf-v5-c-nav--pf-v5-c-nav__subnav--PaddingBottom
0.5rem
.pf-v5-c-nav--pf-v5-c-nav__subnav--xl--PaddingLeft
1rem
.pf-v5-c-nav--pf-v5-c-nav__subnav__link--MarginTop
0
.pf-v5-c-nav--pf-v5-c-nav__subnav__link--PaddingTop
0.5rem
.pf-v5-c-nav--pf-v5-c-nav__subnav__link--PaddingRight
1.5rem
.pf-v5-c-nav--pf-v5-c-nav__subnav__link--PaddingBottom
0.5rem
.pf-v5-c-nav--pf-v5-c-nav__subnav__link--PaddingLeft
1.5rem
.pf-v5-c-nav--pf-v5-c-nav__subnav__link--FontSize
0.875rem
.pf-v5-c-nav--pf-v5-c-nav__subnav__link--hover--after--BorderColor
#8a8d90
.pf-v5-c-nav--pf-v5-c-nav__subnav__link--focus--after--BorderColor
#8a8d90
.pf-v5-c-nav--pf-v5-c-nav__subnav__link--active--after--BorderColor
#8a8d90
.pf-v5-c-nav--pf-v5-c-nav__subnav__link--m-current--after--BorderColor
#73bcf7
.pf-v5-c-nav--pf-v5-c-nav__subnav__link--hover--after--BorderWidth
1px
.pf-v5-c-nav--pf-v5-c-nav__subnav__link--focus--after--BorderWidth
1px
.pf-v5-c-nav--pf-v5-c-nav__subnav__link--active--after--BorderWidth
1px
.pf-v5-c-nav--pf-v5-c-nav__subnav__link--m-current--after--BorderWidth
4px
.pf-v5-c-nav--pf-v5-c-nav__subnav--MaxHeight
0
.pf-v5-c-nav--pf-v5-c-nav__subnav__subnav--PaddingLeft
1.5rem
.pf-v5-c-nav--pf-v5-c-nav__subnav__subnav__link--PaddingLeft
1rem
.pf-v5-c-nav--pf-v5-c-nav__subnav__subnav__link--FontSize
0.75rem
.pf-v5-c-nav--pf-v5-c-nav__item--m-expanded__subnav--MaxHeight
100%
.pf-v5-c-nav--pf-v5-c-nav__subnav--c-divider--PaddingRight
1.5rem
.pf-v5-c-nav--pf-v5-c-nav__subnav--c-divider--PaddingLeft
1.5rem
.pf-v5-c-nav--pf-v5-c-nav__section--first-child--PaddingTop
0.5rem
.pf-v5-c-nav--pf-v5-c-nav__section--last-child--PaddingBottom
0.5rem
.pf-v5-c-nav--pf-v5-c-nav__section__item--MarginTop
0.5rem
.pf-v5-c-nav--pf-v5-c-nav__section__link--PaddingTop
0.5rem
.pf-v5-c-nav--pf-v5-c-nav__section__link--PaddingRight
1rem
.pf-v5-c-nav--pf-v5-c-nav__section__link--PaddingBottom
0.5rem
.pf-v5-c-nav--pf-v5-c-nav__section__link--PaddingLeft
1rem
.pf-v5-c-nav--pf-v5-c-nav__section__link--xl--PaddingRight
1.5rem
.pf-v5-c-nav--pf-v5-c-nav__section__link--xl--PaddingLeft
1.5rem
.pf-v5-c-nav--pf-v5-c-nav__section__link--FontSize
1rem
.pf-v5-c-nav--pf-v5-c-nav__section__link--before--BorderBottomWidth
0
.pf-v5-c-nav--pf-v5-c-nav__section__link--hover--after--BorderColor
transparent
.pf-v5-c-nav--pf-v5-c-nav__section__link--focus--after--BorderColor
transparent
.pf-v5-c-nav--pf-v5-c-nav__section__link--active--after--BorderColor
transparent
.pf-v5-c-nav--pf-v5-c-nav__section__link--m-current--after--BorderColor
#73bcf7
.pf-v5-c-nav--pf-v5-c-nav__section__link--hover--after--BorderWidth
0
.pf-v5-c-nav--pf-v5-c-nav__section__link--focus--after--BorderWidth
0
.pf-v5-c-nav--pf-v5-c-nav__section__link--active--after--BorderWidth
0
.pf-v5-c-nav--pf-v5-c-nav__section__link--m-current--after--BorderWidth
4px
.pf-v5-c-nav--pf-v5-c-nav__section--section--MarginTop
2rem
.pf-v5-c-nav--pf-v5-c-nav__section-title--PaddingTop
0.5rem
.pf-v5-c-nav--pf-v5-c-nav__section-title--PaddingRight
1rem
.pf-v5-c-nav--pf-v5-c-nav__section-title--PaddingBottom
0.5rem
.pf-v5-c-nav--pf-v5-c-nav__section-title--PaddingLeft
1rem
.pf-v5-c-nav--pf-v5-c-nav__section-title--MarginBottom
0.5rem
.pf-v5-c-nav--pf-v5-c-nav__section-title--xl--PaddingRight
1.5rem
.pf-v5-c-nav--pf-v5-c-nav__section-title--xl--PaddingLeft
1.5rem
.pf-v5-c-nav--pf-v5-c-nav__section-title--FontSize
0.875rem
.pf-v5-c-nav--pf-v5-c-nav__section-title--Color
#fff
.pf-v5-c-nav--pf-v5-c-nav__section-title--BorderBottomColor
#3c3f42
.pf-v5-c-nav--pf-v5-c-nav__section-title--BorderBottomWidth
1px
.pf-v5-c-nav--pf-v5-c-nav__scroll-button--Color
#fff
.pf-v5-c-nav--pf-v5-c-nav__scroll-button--hover--Color
#73bcf7
.pf-v5-c-nav--pf-v5-c-nav__scroll-button--focus--Color
#73bcf7
.pf-v5-c-nav--pf-v5-c-nav__scroll-button--active--Color
#73bcf7
.pf-v5-c-nav--pf-v5-c-nav__scroll-button--disabled--Color
#6a6e73
.pf-v5-c-nav--pf-v5-c-nav__scroll-button--BackgroundColor
transparent