Skip to content
Patternfly Logo

Examples

Grouped

Expandable (w/subnavigation titles)

Mixed

Props

NameTypeRequiredDefaultDescription
aria-labelstringNoAccessibility label
childrenReact.ReactNodeNoAnything that can be rendered inside of the nav
classNamestringNoAdditional classes added to the container
onSelect(selectedItem: { groupId: number | string; itemId: number | string; to: string; event: React.FormEvent<HTMLInputElement>; }) => voidNo() => undefinedCallback for updating when item selection changes
onToggle(toggledItem: { groupId: number | string; isExpanded: boolean; event: React.FormEvent<HTMLInputElement>; }) => voidNo() => undefinedCallback for when a list is expanded or collapsed
ouiaSafeNo type infoNotrue
theme'dark' | 'light'No'dark'Indicates which theme color to use
variant'default' | 'horizontal' | 'tertiary'NoFor horizontal navs
NameTypeRequiredDefaultDescription
ariaLeftScrollstringNo'Scroll left'Aria-label for the left scroll button
ariaRightScrollstringNo'Scroll right'Aria-label for the right scroll button
childrenReact.ReactNodeNoChildren nodes
classNamestringNoAdditional classes added to the list
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullAnything that can be rendered inside of the group
classNamestringNo''Additional classes added to the container
idstringNogetUniqueId()Identifier to use for the section aria label
titlestringYesTitle shown for the group
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNoContent rendered inside the nav item. If React.isValidElement(children) props onClick, className and aria-current will be injected.
classNamestringNoAdditional classes added to the nav item
componentReact.ReactNodeNo'a'Component used to render NavItems
groupIdstring | number | nullNonullGroup identifier, will be returned with the onToggle and onSelect callback passed to the Nav component
isActivebooleanNofalseFlag indicating whether the item is active
itemIdstring | number | nullNonullItem identifier, will be returned with the onToggle and onSelect callback passed to the Nav component
onClickNavSelectClickHandlerNonullCallback for item click
preventDefaultbooleanNofalseIf true prevents the default anchor link action to occur. Set to true if you want to handle navigation yourself.
styleChildrenbooleanNotrueWhether to set className on children when React.isValidElement(children)
tostringNoTarget navigation link
NameTypeRequiredDefaultDescription
componentNo type infoNo'li'
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNo''Anything that can be rendered inside of the expandable list
classNamestringNo''Additional classes added to the container
groupIdstring | numberNonullGroup identifier, will be returned with the onToggle and onSelect callback passed to the Nav component
idstringNo''Identifier to use for the section aria label
isActivebooleanNofalseIf true makes the expandable list title active
isExpandedbooleanNofalseBoolean to programatically expand or collapse section
onExpand(e: React.MouseEvent<HTMLLIElement, MouseEvent>, val: boolean) => voidNoallow consumer to optionally override this callback and manage expand state externally
srTextstringNo''If defined, screen readers will read this text instead of the list title
titlestringYesTitle shown for the expandable list

CSS variables

.pf-c-nav--pf-c-nav--Transition
all 250ms cubic-bezier(.42, 0, .58, 1)
.pf-c-nav--pf-c-nav__item--m-expanded__toggle-icon--Rotate
90deg
.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--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__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__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-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