Skip to content
PatternFly logo

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 (only in PageHeader)

Horizontal subnav

Legacy tertiary

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.

Drilldown Beta

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(selectedItem: { groupId: number | string; itemId: number | string; to: string; event: React.FormEvent<HTMLInputElement>; }) => void() => undefinedCallback for updating when item selection changes
onToggle(toggledItem: { groupId: number | string; isExpanded: boolean; event: React.MouseEvent<HTMLButtonElement>; }) => 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
ariaLeftScrollstring'Scroll left'Aria-label for the left scroll button
ariaRightScrollstring'Scroll right'Aria-label for the right scroll button
childrenReact.ReactNodeChildren nodes
classNamestringAdditional classes added to the list
*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.ReactNode'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
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
onClickNavSelectClickHandlernullCallback 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.
removeFindDomNodeBetabooleanfalseOpt-in for updated popper that does not use findDOMNode.
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
titlerequiredstringTitle 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(e: 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

.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
.pf-c-nav--pf-c-nav__item--m-flyout--c-menu__item--FontSize
0.875rem
.pf-c-nav--pf-c-nav__item--m-flyout--c-menu__item--OutlineOffset
calc(0.25rem * -1)
.pf-c-nav--pf-c-nav__item--m-flyout--c-menu__item--before--BorderBottomWidth
1px
.pf-c-nav--pf-c-nav__item--m-flyout--c-menu__item--before--BorderBottomColor
#3c3f42
.pf-c-nav--pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftWidth
1px
.pf-c-nav--pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftColor
#8a8d90
.pf-c-nav--pf-c-nav__item--m-flyout--c-menu__item--hover--after--Top
calc(-1 * 1px)
.pf-c-nav--pf-c-nav__item--m-flyout--c-menu__list-item--hover--BackgroundColor
#3c3f42
.pf-c-nav--pf-c-nav__item--m-flyout--c-menu__list-item--focus-within--BackgroundColor
#3c3f42
.pf-c-nav--pf-c-nav__item--m-flyout--c-menu__list-item--active--BackgroundColor
#3c3f42
.pf-c-nav--pf-c-nav__item--m-flyout--c-menu__list-item--first-child__item--hover--after--Top
0
.pf-c-nav--pf-c-nav__item--m-flyout--c-menu--BoxShadow
0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)
.pf-c-nav--pf-c-nav--c-menu--BackgroundColor
#212427
.pf-c-nav--pf-c-nav--c-menu__list--PaddingTop
0
.pf-c-nav--pf-c-nav--c-menu__list--PaddingBottom
0
.pf-c-nav--pf-c-nav--c-menu__list-item--Color
#fff
.pf-c-nav--pf-c-nav--c-menu__list-item--hover--Color
#fff
.pf-c-nav--pf-c-nav--c-menu__list-item--active--Color
#fff
.pf-c-nav--pf-c-nav--c-menu__list-item--focus-within--Color
#fff
.pf-c-nav--pf-c-nav--c-menu__list-item--hover--BackgroundColor
#3c3f42
.pf-c-nav--pf-c-nav--c-menu__list-item--focus-within--BackgroundColor
#3c3f42
.pf-c-nav--pf-c-nav--c-menu__list-item--m-drill-up--before--BorderBottomWidth
3px
.pf-c-nav--pf-c-nav--c-menu__list-item--m-drill-up__item--FontWeight
700
.pf-c-nav--pf-c-nav--c-menu__item--PaddingTop
1rem
.pf-c-nav--pf-c-nav--c-menu__item--PaddingRight
1rem
.pf-c-nav--pf-c-nav--c-menu__item--PaddingBottom
1rem
.pf-c-nav--pf-c-nav--c-menu__item--PaddingLeft
1rem
.pf-c-nav--pf-c-nav--c-menu__item--xl--PaddingRight
1.5rem
.pf-c-nav--pf-c-nav--c-menu__item--xl--PaddingLeft
1.5rem
.pf-c-nav--pf-c-nav--c-menu__item--FontSize
0.875rem
.pf-c-nav--pf-c-nav--c-menu__item--OutlineOffset
calc(0.25rem * -1)
.pf-c-nav--pf-c-nav--c-menu__item--before--BorderBottomWidth
1px
.pf-c-nav--pf-c-nav--c-menu__item--before--BorderBottomColor
#3c3f42
.pf-c-nav--pf-c-nav--c-menu__item--after--BorderLeftWidth
0
.pf-c-nav--pf-c-nav--c-menu__item--after--BorderLeftColor
transparent
.pf-c-nav--pf-c-nav--c-menu__item--m-current--BackgroundColor
#4f5255
.pf-c-nav--pf-c-nav--c-menu__item--m-current--after--BorderLeftWidth
4px
.pf-c-nav--pf-c-nav--c-menu__item--m-current--after--BorderColor
#73bcf7
.pf-c-nav--pf-c-nav--c-menu__item-description--Color
#8a8d90
.pf-c-nav--pf-c-nav--c-menu--m-flyout--left-offset
0.25rem
.pf-c-nav--pf-c-nav--c-menu--m-flyout--m-left--right-offset
0.25rem
.pf-c-nav--pf-c-nav--c-menu--m-flyout--Top
0
.pf-c-nav--pf-c-nav--c-menu--m-flyout--c-menu--Top
calc(0 * -1)
.pf-c-nav--pf-c-nav--c-menu--m-flyout--c-menu--Right
auto
.pf-c-nav--pf-c-nav--c-menu--m-flyout--c-menu--Bottom
auto
.pf-c-nav--pf-c-nav--c-menu--m-flyout--c-menu--Left
calc(100% - 0.25rem)
.pf-c-nav--pf-c-nav--c-menu--m-flyout--m-left--Right
calc(100% - 0.25rem)
.pf-c-nav--pf-c-nav--c-menu--m-flyout--m-top--Bottom
0
.pf-c-nav--pf-c-nav--c-menu--m-flyout--BoxShadow
0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)
.pf-c-nav--pf-c-nav--c-menu--m-flyout__item--PaddingTop
0.5rem
.pf-c-nav--pf-c-nav--c-menu--m-flyout__item--PaddingRight
1.5rem
.pf-c-nav--pf-c-nav--c-menu--m-flyout__item--PaddingBottom
0.5rem
.pf-c-nav--pf-c-nav--c-menu--m-flyout__item--PaddingLeft
1.5rem
.pf-c-nav--pf-c-nav--c-menu--m-flyout__item--hover--after--BorderLeftWidth
1px
.pf-c-nav--pf-c-nav--c-menu--m-flyout__item--hover--after--BorderLeftColor
#8a8d90
.pf-c-nav--pf-c-nav__toggle--m-start--MarginRight
0.5rem
.pf-c-nav .pf-c-menu--pf-c-menu--MinWidth
100%
.pf-c-nav .pf-c-menu--pf-c-menu--BackgroundColor
#212427
.pf-c-nav .pf-c-menu--pf-c-menu__list--PaddingTop
0
.pf-c-nav .pf-c-menu--pf-c-menu__list--PaddingBottom
0
.pf-c-nav .pf-c-menu--pf-c-menu__item--PaddingTop
1rem
.pf-c-nav .pf-c-menu--pf-c-menu__item--PaddingRight
1rem
.pf-c-nav .pf-c-menu--pf-c-menu__item--PaddingBottom
1rem
.pf-c-nav .pf-c-menu--pf-c-menu__item--PaddingLeft
1rem
.pf-c-nav .pf-c-menu--pf-c-menu__list-item--Color
#fff
.pf-c-nav .pf-c-menu--pf-c-menu__list-item--hover--Color
#fff
.pf-c-nav .pf-c-menu--pf-c-menu__list-item--active--Color
#fff
.pf-c-nav .pf-c-menu--pf-c-menu__list-item--focus-within--Color
#fff
.pf-c-nav .pf-c-menu--pf-c-menu__list-item--hover--BackgroundColor
#3c3f42
.pf-c-nav .pf-c-menu--pf-c-menu__list-item--focus-within--BackgroundColor
#3c3f42
.pf-c-nav .pf-c-menu--pf-c-menu__item-description--Color
#8a8d90
.pf-c-nav .pf-c-menu.pf-m-flyout--pf-c-menu--BoxShadow
0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)
.pf-c-nav .pf-c-menu.pf-m-flyout--pf-c-menu__list--PaddingTop
0
.pf-c-nav .pf-c-menu.pf-m-flyout--pf-c-menu__list--PaddingBottom
0
.pf-c-nav .pf-c-menu.pf-m-flyout--pf-c-menu__item--FontSize
0.875rem
.pf-c-nav .pf-c-menu.pf-m-flyout--pf-c-menu__item--Color
undefined, inherit
.pf-c-nav .pf-c-menu.pf-m-flyout--pf-c-menu__item--PaddingTop
0.5rem
.pf-c-nav .pf-c-menu.pf-m-flyout--pf-c-menu__item--PaddingRight
1.5rem
.pf-c-nav .pf-c-menu.pf-m-flyout--pf-c-menu__item--PaddingBottom
0.5rem
.pf-c-nav .pf-c-menu.pf-m-flyout--pf-c-menu__item--PaddingLeft
1.5rem
.pf-c-nav .pf-c-menu.pf-m-flyout .pf-c-menu__item:hover--pf-c-nav--c-menu__item--after--BorderLeftWidth
1px
.pf-c-nav .pf-c-menu.pf-m-flyout .pf-c-menu__item:hover--pf-c-nav--c-menu__item--after--BorderLeftColor
#8a8d90
.pf-c-nav .pf-c-menu.pf-m-top--pf-c-nav--c-menu--m-flyout--c-menu--Top
auto
.pf-c-nav .pf-c-menu.pf-m-top--pf-c-nav--c-menu--m-flyout--c-menu--Bottom
0
.pf-c-nav .pf-c-menu.pf-m-left--pf-c-nav--c-menu--m-flyout--c-menu--Right
calc(100% - 0.25rem)
.pf-c-nav .pf-c-menu.pf-m-left--pf-c-nav--c-menu--m-flyout--c-menu--Left
auto
.pf-c-nav .pf-c-menu__item.pf-m-current--pf-c-nav--c-menu__item--after--BorderLeftWidth
4px
.pf-c-nav .pf-c-menu__item.pf-m-current--pf-c-nav--c-menu__item--after--BorderLeftColor
#73bcf7
.pf-c-nav .pf-c-menu__list-item:where(.pf-m-drill-up)--pf-c-nav--c-menu__item--before--BorderBottomWidth
3px
.pf-c-nav .pf-c-menu__list-item:where(.pf-m-drill-up) > .pf-c-menu__item--pf-c-menu__item--FontWeight
700
.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
.pf-c-nav.pf-m-tertiary--pf-c-nav__scroll-button--Color
#151515
.pf-c-nav.pf-m-tertiary--pf-c-nav__scroll-button--hover--Color
#06c
.pf-c-nav.pf-m-tertiary--pf-c-nav__scroll-button--focus--Color
#06c
.pf-c-nav.pf-m-tertiary--pf-c-nav__scroll-button--active--Color
#06c
.pf-c-nav.pf-m-tertiary--pf-c-nav__scroll-button--disabled--Color
#d2d2d2
.pf-c-nav.pf-m-tertiary--pf-c-nav__scroll-button--before--BorderColor
#f0f0f0
.pf-c-nav.pf-m-tertiary--pf-c-nav__scroll-button--disabled--before--BorderColor
#f0f0f0
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--FontSize
0.875rem
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--PaddingTop
0.5rem
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--PaddingRight
1rem
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--PaddingBottom
0.5rem
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--PaddingLeft
1rem
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--Color
#f0f0f0
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--Right
undefined
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--Left
undefined
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--hover--Color
#fff
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--active--Color
#fff
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--focus--Color
#fff
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--m-current--Color
#fff
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--BackgroundColor
transparent
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--hover--BackgroundColor
#3c3f42
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--focus--BackgroundColor
#3c3f42
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--active--BackgroundColor
#3c3f42
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--m-current--BackgroundColor
#4f5255
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--before--BorderColor
transparent
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--after--BorderColor
#3c3f42
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--hover--after--BorderColor
#3c3f42
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--active--after--BorderColor
#3c3f42
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--m-current--after--BorderColor
#3c3f42
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--after--BorderLeftWidth
1px
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--hover--after--BorderLeftWidth
1px
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--active--after--BorderLeftWidth
1px
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--m-current--after--BorderLeftWidth
1px
.pf-c-nav.pf-m-horizontal-subnav.pf-m-scrollable .pf-c-nav__item:first-child--pf-c-nav__link--after--BorderLeftWidth
0
.pf-c-nav.pf-m-horizontal-subnav.pf-m-scrollable .pf-c-nav__item:first-child--pf-c-nav__link--hover--after--BorderLeftWidth
0
.pf-c-nav.pf-m-horizontal-subnav.pf-m-scrollable .pf-c-nav__item:first-child--pf-c-nav__link--active--after--BorderLeftWidth
0
.pf-c-nav.pf-m-horizontal-subnav.pf-m-scrollable .pf-c-nav__item:first-child--pf-c-nav__link--m-current--after--BorderLeftWidth
0
.pf-c-nav .pf-c-divider--pf-c-divider--after--BackgroundColor
#3c3f42
.pf-c-nav__item.pf-m-expandable--pf-c-nav__link--before--BorderBottomWidth
0
.pf-c-nav__item .pf-c-nav__item.pf-m-expandable--pf-c-nav__toggle--FontSize
0.875rem
.pf-c-nav__item .pf-c-nav__item.pf-m-expandable--pf-c-nav__link--PaddingRight
2rem
.pf-c-nav__item.pf-m-flyout:hover--pf-c-nav__link--BackgroundColor
#3c3f42
.pf-c-nav__item.pf-m-flyout:hover--pf-c-nav__link--before--BorderBottomWidth
0
.pf-c-nav__item.pf-m-flyout:focus--pf-c-nav__link--BackgroundColor
#3c3f42
.pf-c-nav__item.pf-m-flyout:focus--pf-c-nav__link--before--BorderBottomWidth
0
.pf-c-nav__item.pf-m-flyout:active--pf-c-nav__link--BackgroundColor
#3c3f42
.pf-c-nav__item.pf-m-flyout:active--pf-c-nav__link--before--BorderBottomWidth
0
.pf-c-nav__item.pf-m-flyout .pf-c-menu--pf-c-menu--MinWidth
100%
.pf-c-nav__item.pf-m-flyout .pf-c-menu--pf-c-menu--BoxShadow
0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)
.pf-c-nav__item.pf-m-flyout .pf-c-menu--pf-c-menu--BackgroundColor
#212427
.pf-c-nav__item.pf-m-flyout .pf-c-menu--pf-c-menu__list--PaddingTop
0
.pf-c-nav__item.pf-m-flyout .pf-c-menu--pf-c-menu__list--PaddingBottom
0
.pf-c-nav__item.pf-m-flyout .pf-c-menu--pf-c-menu__list-item--hover--BackgroundColor
#3c3f42
.pf-c-nav__item.pf-m-flyout .pf-c-menu--pf-c-menu__list-item--focus-within--BackgroundColor
#3c3f42
.pf-c-nav__item.pf-m-flyout .pf-c-menu--pf-c-menu__list-item--active--BackgroundColor
#3c3f42
.pf-c-nav__item.pf-m-flyout .pf-c-menu--pf-c-menu__item--FontSize
0.875rem
.pf-c-nav__item.pf-m-flyout .pf-c-menu--pf-c-menu__item--Color
#fff
.pf-c-nav__item.pf-m-flyout .pf-c-menu--pf-c-menu__item--PaddingTop
0.5rem
.pf-c-nav__item.pf-m-flyout .pf-c-menu--pf-c-menu__item--PaddingRight
1.5rem
.pf-c-nav__item.pf-m-flyout .pf-c-menu--pf-c-menu__item--PaddingBottom
0.5rem
.pf-c-nav__item.pf-m-flyout .pf-c-menu--pf-c-menu__item--PaddingLeft
1.5rem
.pf-c-nav__item.pf-m-flyout .pf-c-menu--pf-c-menu__item-description--Color
#f0f0f0
.pf-c-nav__item.pf-m-flyout .pf-c-menu--pf-c-nav--c-menu--m-flyout--c-menu--Bottom
calc(0 + 0px)
.pf-c-nav__item.pf-m-flyout .pf-c-menu--pf-c-nav--c-menu--m-flyout--c-menu--Right
calc(100% - 0.25rem)
.pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu__list-item:first-child--pf-c-nav__item--m-flyout--c-menu--c-menu--Top
0
.pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu__list-item:first-child--pf-c-nav__item--m-flyout--c-menu__item--hover--after--Top
0
.pf-c-nav__subnav--pf-c-nav__link--PaddingTop
0.5rem
.pf-c-nav__subnav--pf-c-nav__link--PaddingRight
1.5rem
.pf-c-nav__subnav--pf-c-nav__link--PaddingBottom
0.5rem
.pf-c-nav__subnav--pf-c-nav__link--PaddingLeft
1.5rem
.pf-c-nav__subnav--pf-c-nav__link--FontSize
0.875rem
.pf-c-nav__subnav--pf-c-nav__link--hover--after--BorderColor
#8a8d90
.pf-c-nav__subnav--pf-c-nav__link--focus--after--BorderColor
#8a8d90
.pf-c-nav__subnav--pf-c-nav__link--active--after--BorderColor
#8a8d90
.pf-c-nav__subnav--pf-c-nav__link--m-current--after--BorderColor
#73bcf7
.pf-c-nav__subnav--pf-c-nav__link--hover--after--BorderLeftWidth
1px
.pf-c-nav__subnav--pf-c-nav__link--focus--after--BorderLeftWidth
1px
.pf-c-nav__subnav--pf-c-nav__link--active--after--BorderLeftWidth
1px
.pf-c-nav__subnav--pf-c-nav__link--m-current--after--BorderLeftWidth
4px
.pf-c-nav__subnav--pf-c-nav--c-divider--PaddingRight
1.5rem
.pf-c-nav__subnav--pf-c-nav--c-divider--PaddingLeft
1.5rem
.pf-c-nav__subnav .pf-c-nav__subnav--pf-c-nav__link--FontSize
0.75rem
.pf-c-nav__subnav .pf-c-nav__subnav--pf-c-nav__link--PaddingLeft
1rem
.pf-c-nav__subnav .pf-c-nav__subnav--pf-c-nav__subnav--PaddingLeft
1.5rem
.pf-c-nav__item.pf-m-expanded .pf-c-nav__subnav--pf-c-nav__subnav--MaxHeight
100%
.pf-c-nav__section--pf-c-nav__item--MarginTop
0.5rem
.pf-c-nav__section--pf-c-nav__link--PaddingTop
0.5rem
.pf-c-nav__section--pf-c-nav__link--PaddingRight
1rem
.pf-c-nav__section--pf-c-nav__link--PaddingBottom
0.5rem
.pf-c-nav__section--pf-c-nav__link--PaddingLeft
1rem
.pf-c-nav__section--pf-c-nav__link--FontSize
1rem
.pf-c-nav__section--pf-c-nav__link--before--BorderBottomWidth
0
.pf-c-nav__section--pf-c-nav__link--hover--after--BorderColor
transparent
.pf-c-nav__section--pf-c-nav__link--focus--after--BorderColor
transparent
.pf-c-nav__section--pf-c-nav__link--active--after--BorderColor
transparent
.pf-c-nav__section--pf-c-nav__link--m-current--after--BorderColor
#73bcf7
.pf-c-nav__section--pf-c-nav__link--hover--after--BorderLeftWidth
0
.pf-c-nav__section--pf-c-nav__link--focus--after--BorderLeftWidth
0
.pf-c-nav__section--pf-c-nav__link--active--after--BorderLeftWidth
0
.pf-c-nav__section--pf-c-nav__link--m-current--after--BorderLeftWidth
4px
.pf-c-nav__section--pf-c-nav--c-divider--MarginBottom
0
.pf-c-nav__section + .pf-c-nav__section--pf-c-nav__section--MarginTop
2rem
.pf-c-nav__section.pf-m-no-title--pf-c-nav__section--MarginTop
0
.pf-c-nav__scroll-button:nth-of-type(1)--pf-c-nav__scroll-button--before--BorderRightWidth
1px
.pf-c-nav__scroll-button:nth-of-type(2)--pf-c-nav__scroll-button--before--BorderLeftWidth
1px

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.

Red Hat logo
Copyright © 2022 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines