Skip to content
Patternfly Logo

Navigation

Examples

Grouped

Expandable (w/subnavigation titles)

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

*required
NameTypeDefaultDescription
aria-labelstringAccessibility label
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
ouiaSafeNo type infotrue
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
titlerequiredstringTitle shown for the group
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
*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.
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
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
*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.
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)