Skip to content
PatternFly

Navigation

Examples

Default

Grouped nav

Grouped nav, no titles

Expanded

Expanded with subnav titles

Mixed

Expandable, third level

Horizontal

Horizontal overflow

Horizontal subnav

Horizontal subnav overflow

Tertiary

Tertiary overflow

Default in light mode

Expanded in light mode

Nav link text

When using anything other than a text node for the link text, wrap the link text in an element with .pf-v5-c-nav__link-text.

Documentation

Overview

The navigation system relies on several different sub-components:

  • .pf-v5-c-nav__list - default navigation list. It is the basis for both default and expandable, vertical navigation.

Accessibility

Attribute
Applied to
Outcome
aria-label="[landmark description]"
.pf-v5-c-nav
Describes <nav> landmark.
aria-label="[section title]"
.pf-v5-c-nav__section
Describes a nav <section>, where a .pf-v5-c-nav__section-title is not present.
aria-labelledby="[id value of link describing subnav]"
.pf-v5-c-nav__subnav
Gives the subnav <section> landmark an accessible name by referring to the element that provides the subnav <section> landmark title.
aria-expanded="false"
.pf-v5-c-nav__link
Indicates that subnav section is hidden.
aria-expanded="true"
.pf-v5-c-nav__link
Indicates that subnav section is visible.
hidden
.pf-v5-c-nav__subnav
Indicates that the subnav section is hidden so that it isn't visible in the UI and isn't accessed by assistive technologies.
disabled
.pf-v5-c-nav__scroll-button
Indicates that a scroll button is disabled, when at the first or last item of a list. Required when disabled
aria-current="page"
.pf-v5-c-nav__link
Indicates the current page link. Can only occur once on page.
aria-haspopup="true"
.pf-v5-c-nav__link
Declares that a nav item has a submenu.

Usage

Class
Applied to
Outcome
.pf-v5-c-nav
<nav>
Initiates a primary nav element.
.pf-v5-c-nav__subnav
<section>
Initiates a subnav section.
.pf-v5-c-nav__list
<ul>
Initiates nav list.
.pf-v5-c-nav__item
<li>
Initiates nav list item.
.pf-v5-c-nav__link
<a>
Initiates nav list link.
.pf-v5-c-nav__link-text
<span>
Initiates nav list link text.
.pf-v5-c-nav__section
<section>
Initiates a nav section element.
.pf-v5-c-nav__section-title
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
Initiates a nav section title.
.pf-v5-c-nav__toggle
<span>
Initiates the nav toggle wrapper.
.pf-v5-c-nav__toggle-icon
<span>
Initiates a nav toggle icon wrapper.
.pf-v5-c-nav__scroll-button
<button>
Initiates a nav scroll button. Required for horizontal navs
.pf-m-horizontal
.pf-v5-c-nav
Modifies nav for the horizontal variation.
.pf-m-horizontal-subnav
.pf-v5-c-nav
Modifies nav for the horizontal subnav variation.
.pf-m-tertiary
.pf-v5-c-nav
Modifies nav for the tertiary variation.
.pf-m-light
.pf-v5-c-nav
Modifies nav for the light variation. Note: only for use with vertical navs, and requires .pf-m-light on the page component's sidebar element (.pf-v5-c-page__sidebar).
.pf-m-flyout
.pf-v5-c-nav__item
Modifies nav item for the flyout variation.
.pf-m-scrollable
.pf-v5-c-nav
Modifies nav for the scrollable state.
.pf-m-expandable
.pf-v5-c-nav__item
Modifies for the expandable state.
.pf-m-expanded
.pf-v5-c-nav__item
Modifies for the expanded state.
.pf-m-current
.pf-v5-c-nav__link
Modifies for the current state.
.pf-m-hover
.pf-v5-c-nav__link
Modifies for the hover state.
.pf-m-start
.pf-v5-c-nav__toggle
Modifies nav toggle to align left.

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
.pf-v5-c-nav--pf-v5-c-nav__scroll-button--Width
44px
.pf-v5-c-nav--pf-v5-c-nav__scroll-button--OutlineOffset
calc(-1 * 0.25rem)
.pf-v5-c-nav--pf-v5-c-nav__scroll-button--Transition
margin .125s, transform .125s, opacity .125s
.pf-v5-c-nav--pf-v5-c-nav__scroll-button--before--BorderColor
#3c3f42
.pf-v5-c-nav--pf-v5-c-nav__scroll-button--before--BorderWidth
1px
.pf-v5-c-nav--pf-v5-c-nav__scroll-button--before--BorderRightWidth
0
.pf-v5-c-nav--pf-v5-c-nav__scroll-button--before--BorderLeftWidth
0
.pf-v5-c-nav--pf-v5-c-nav__scroll-button--disabled--before--BorderColor
transparent
.pf-v5-c-nav--pf-v5-c-nav__toggle--PaddingRight
0.5rem
.pf-v5-c-nav--pf-v5-c-nav__toggle--PaddingLeft
0.5rem
.pf-v5-c-nav--pf-v5-c-nav__toggle--FontSize
1rem
.pf-v5-c-nav--pf-v5-c-nav__toggle-icon--Transition
250ms
.pf-v5-c-nav--pf-v5-c-nav--c-divider--MarginTop
0.5rem
.pf-v5-c-nav--pf-v5-c-nav--c-divider--MarginBottom
0.5rem
.pf-v5-c-nav--pf-v5-c-nav--c-divider--PaddingRight
0
.pf-v5-c-nav--pf-v5-c-nav--c-divider--PaddingLeft
0
.pf-v5-c-nav--pf-v5-c-nav--c-divider--BackgroundColor
#3c3f42
.pf-v5-c-nav--pf-v5-c-nav__list--ScrollSnapTypeAxis
x
.pf-v5-c-nav--pf-v5-c-nav__list--ScrollSnapTypeStrictness
proximity
.pf-v5-c-nav--pf-v5-c-nav__list--ScrollSnapType
x proximity
.pf-v5-c-nav--pf-v5-c-nav__item--ScrollSnapAlign
end
.pf-v5-c-nav--pf-v5-c-nav__item--m-flyout--c-menu--top-offset
0px
.pf-v5-c-nav--pf-v5-c-nav__item--m-flyout--c-menu--left-offset
0.25rem
.pf-v5-c-nav--pf-v5-c-nav__item--m-flyout--c-menu--m-top--bottom-offset
0px
.pf-v5-c-nav--pf-v5-c-nav__item--m-flyout--c-menu--m-left--right-offset
0.25rem
.pf-v5-c-nav--pf-v5-c-nav__item--m-flyout--MarginTop
0
.pf-v5-c-nav--pf-v5-c-nav__item--m-flyout--hover__link--BackgroundColor
#3c3f42
.pf-v5-c-nav--pf-v5-c-nav__item--m-flyout--focus__link--BackgroundColor
#3c3f42
.pf-v5-c-nav--pf-v5-c-nav__item--m-flyout--active__link--BackgroundColor
#3c3f42
.pf-v5-c-nav--pf-v5-c-nav__item--m-flyout--hover__link--before--BorderWidth
0
.pf-v5-c-nav--pf-v5-c-nav__item--m-flyout--focus__link--before--BorderWidth
0
.pf-v5-c-nav--pf-v5-c-nav__item--m-flyout--active__link--before--BorderWidth
0
.pf-v5-c-nav--pf-v5-c-nav__item--m-flyout__item--last-child__link--before--BorderBottomWidth
0
.pf-v5-c-nav--pf-v5-c-nav__item--m-flyout--c-menu--Top
calc(0px + 0px)
.pf-v5-c-nav--pf-v5-c-nav__item--m-flyout--c-menu--c-menu--Top
calc(calc(0px + 0px) - 1px)
.pf-v5-c-nav--pf-v5-c-nav__item--m-flyout--c-menu__list-item--first-child--c-menu--Top
0
.pf-v5-c-nav--pf-v5-c-nav__item--m-flyout--c-menu--Left
calc(100% - 0.25rem)
.pf-v5-c-nav--pf-v5-c-nav__item--m-flyout--c-menu--m-left--Right
calc(100% - 0.25rem)
.pf-v5-c-nav--pf-v5-c-nav__item--m-flyout--c-menu--m-top--Bottom
calc(0 + 0px)
.pf-v5-c-nav--pf-v5-c-nav__item--m-flyout--c-menu--BackgroundColor
#212427
.pf-v5-c-nav--pf-v5-c-nav__item--m-flyout--c-menu__item--Color
#fff
.pf-v5-c-nav--pf-v5-c-nav__item--m-flyout--c-menu__item--PaddingTop
0.5rem
.pf-v5-c-nav--pf-v5-c-nav__item--m-flyout--c-menu__item--PaddingRight
1.5rem
.pf-v5-c-nav--pf-v5-c-nav__item--m-flyout--c-menu__item--PaddingBottom
0.5rem
.pf-v5-c-nav--pf-v5-c-nav__item--m-flyout--c-menu__item--PaddingLeft
1.5rem
.pf-v5-c-nav--pf-v5-c-nav__item--m-flyout--c-menu__item-description--Color
#f0f0f0
.pf-v5-c-nav--pf-v5-c-nav__item--m-flyout--c-menu__item--FontSize
0.875rem
.pf-v5-c-nav--pf-v5-c-nav__item--m-flyout--c-menu__item--OutlineOffset
calc(0.25rem * -1)
.pf-v5-c-nav--pf-v5-c-nav__item--m-flyout--c-menu__item--before--BorderBottomWidth
1px
.pf-v5-c-nav--pf-v5-c-nav__item--m-flyout--c-menu__item--before--BorderBottomColor
#3c3f42
.pf-v5-c-nav--pf-v5-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftWidth
1px
.pf-v5-c-nav--pf-v5-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftColor
#8a8d90
.pf-v5-c-nav--pf-v5-c-nav__item--m-flyout--c-menu__item--hover--after--Top
calc(-1 * 1px)
.pf-v5-c-nav--pf-v5-c-nav__item--m-flyout--c-menu__list-item--hover--BackgroundColor
#3c3f42
.pf-v5-c-nav--pf-v5-c-nav__item--m-flyout--c-menu__list-item--focus-within--BackgroundColor
#3c3f42
.pf-v5-c-nav--pf-v5-c-nav__item--m-flyout--c-menu__list-item--active--BackgroundColor
#3c3f42
.pf-v5-c-nav--pf-v5-c-nav__item--m-flyout--c-menu__list-item--first-child__item--hover--after--Top
0
.pf-v5-c-nav--pf-v5-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-v5-c-nav--pf-v5-c-nav--c-menu--BackgroundColor
#212427
.pf-v5-c-nav--pf-v5-c-nav--c-menu__list--PaddingTop
0
.pf-v5-c-nav--pf-v5-c-nav--c-menu__list--PaddingBottom
0
.pf-v5-c-nav--pf-v5-c-nav--c-menu__list-item--Color
#fff
.pf-v5-c-nav--pf-v5-c-nav--c-menu__list-item--hover--Color
#fff
.pf-v5-c-nav--pf-v5-c-nav--c-menu__list-item--active--Color
#fff
.pf-v5-c-nav--pf-v5-c-nav--c-menu__list-item--focus-within--Color
#fff
.pf-v5-c-nav--pf-v5-c-nav--c-menu__list-item--hover--BackgroundColor
#3c3f42
.pf-v5-c-nav--pf-v5-c-nav--c-menu__list-item--focus-within--BackgroundColor
#3c3f42
.pf-v5-c-nav--pf-v5-c-nav--c-menu__list-item--m-drill-up--before--BorderBottomWidth
3px
.pf-v5-c-nav--pf-v5-c-nav--c-menu__list-item--m-drill-up__item--FontWeight
700
.pf-v5-c-nav--pf-v5-c-nav--c-menu__item--PaddingTop
1rem
.pf-v5-c-nav--pf-v5-c-nav--c-menu__item--PaddingRight
1rem
.pf-v5-c-nav--pf-v5-c-nav--c-menu__item--PaddingBottom
1rem
.pf-v5-c-nav--pf-v5-c-nav--c-menu__item--PaddingLeft
1rem
.pf-v5-c-nav--pf-v5-c-nav--c-menu__item--xl--PaddingRight
1.5rem
.pf-v5-c-nav--pf-v5-c-nav--c-menu__item--xl--PaddingLeft
1.5rem
.pf-v5-c-nav--pf-v5-c-nav--c-menu__item--FontSize
0.875rem
.pf-v5-c-nav--pf-v5-c-nav--c-menu__item--OutlineOffset
calc(0.25rem * -1)
.pf-v5-c-nav--pf-v5-c-nav--c-menu__item--before--BorderBottomWidth
1px
.pf-v5-c-nav--pf-v5-c-nav--c-menu__item--before--BorderBottomColor
#3c3f42
.pf-v5-c-nav--pf-v5-c-nav--c-menu__item--after--BorderLeftWidth
0
.pf-v5-c-nav--pf-v5-c-nav--c-menu__item--after--BorderLeftColor
transparent
.pf-v5-c-nav--pf-v5-c-nav--c-menu__item--m-current--BackgroundColor
#4f5255
.pf-v5-c-nav--pf-v5-c-nav--c-menu__item--m-current--after--BorderLeftWidth
4px
.pf-v5-c-nav--pf-v5-c-nav--c-menu__item--m-current--after--BorderColor
#73bcf7
.pf-v5-c-nav--pf-v5-c-nav--c-menu__item-description--Color
#8a8d90
.pf-v5-c-nav--pf-v5-c-nav--c-menu--m-flyout--left-offset
0.25rem
.pf-v5-c-nav--pf-v5-c-nav--c-menu--m-flyout--m-left--right-offset
0.25rem
.pf-v5-c-nav--pf-v5-c-nav--c-menu--m-flyout--Top
0
.pf-v5-c-nav--pf-v5-c-nav--c-menu--m-flyout--c-menu--Top
calc(0 * -1)
.pf-v5-c-nav--pf-v5-c-nav--c-menu--m-flyout--c-menu--Right
auto
.pf-v5-c-nav--pf-v5-c-nav--c-menu--m-flyout--c-menu--Bottom
auto
.pf-v5-c-nav--pf-v5-c-nav--c-menu--m-flyout--c-menu--Left
calc(100% - 0.25rem)
.pf-v5-c-nav--pf-v5-c-nav--c-menu--m-flyout--m-left--Right
calc(100% - 0.25rem)
.pf-v5-c-nav--pf-v5-c-nav--c-menu--m-flyout--m-top--Bottom
0
.pf-v5-c-nav--pf-v5-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-v5-c-nav--pf-v5-c-nav--c-menu--m-flyout__item--PaddingTop
0.5rem
.pf-v5-c-nav--pf-v5-c-nav--c-menu--m-flyout__item--PaddingRight
1.5rem
.pf-v5-c-nav--pf-v5-c-nav--c-menu--m-flyout__item--PaddingBottom
0.5rem
.pf-v5-c-nav--pf-v5-c-nav--c-menu--m-flyout__item--PaddingLeft
1.5rem
.pf-v5-c-nav--pf-v5-c-nav--c-menu--m-flyout__item--hover--after--BorderLeftWidth
1px
.pf-v5-c-nav--pf-v5-c-nav--c-menu--m-flyout__item--hover--after--BorderLeftColor
#8a8d90
.pf-v5-c-nav--pf-v5-c-nav__toggle--m-start--MarginRight
0.5rem
.pf-v5-c-nav .pf-v5-c-menu--pf-v5-c-menu--MinWidth
100%
.pf-v5-c-nav .pf-v5-c-menu--pf-v5-c-menu--BackgroundColor
#212427
.pf-v5-c-nav .pf-v5-c-menu--pf-v5-c-menu__list--PaddingTop
0
.pf-v5-c-nav .pf-v5-c-menu--pf-v5-c-menu__list--PaddingBottom
0
.pf-v5-c-nav .pf-v5-c-menu--pf-v5-c-menu__item--PaddingTop
1rem
.pf-v5-c-nav .pf-v5-c-menu--pf-v5-c-menu__item--PaddingRight
1rem
.pf-v5-c-nav .pf-v5-c-menu--pf-v5-c-menu__item--PaddingBottom
1rem
.pf-v5-c-nav .pf-v5-c-menu--pf-v5-c-menu__item--PaddingLeft
1rem
.pf-v5-c-nav .pf-v5-c-menu--pf-v5-c-menu__list-item--Color
#fff
.pf-v5-c-nav .pf-v5-c-menu--pf-v5-c-menu__list-item--hover--Color
#fff
.pf-v5-c-nav .pf-v5-c-menu--pf-v5-c-menu__list-item--active--Color
#fff
.pf-v5-c-nav .pf-v5-c-menu--pf-v5-c-menu__list-item--focus-within--Color
#fff
.pf-v5-c-nav .pf-v5-c-menu--pf-v5-c-menu__list-item--hover--BackgroundColor
#3c3f42
.pf-v5-c-nav .pf-v5-c-menu--pf-v5-c-menu__list-item--focus-within--BackgroundColor
#3c3f42
.pf-v5-c-nav .pf-v5-c-menu--pf-v5-c-menu__item-description--Color
#8a8d90
.pf-v5-c-nav .pf-v5-c-menu.pf-m-flyout--pf-v5-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-v5-c-nav .pf-v5-c-menu.pf-m-flyout--pf-v5-c-menu__list--PaddingTop
0
.pf-v5-c-nav .pf-v5-c-menu.pf-m-flyout--pf-v5-c-menu__list--PaddingBottom
0
.pf-v5-c-nav .pf-v5-c-menu.pf-m-flyout--pf-v5-c-menu__item--FontSize
0.875rem
.pf-v5-c-nav .pf-v5-c-menu.pf-m-flyout--pf-v5-c-menu__item--Color
undefined, inherit
.pf-v5-c-nav .pf-v5-c-menu.pf-m-flyout--pf-v5-c-menu__item--PaddingTop
0.5rem
.pf-v5-c-nav .pf-v5-c-menu.pf-m-flyout--pf-v5-c-menu__item--PaddingRight
1.5rem
.pf-v5-c-nav .pf-v5-c-menu.pf-m-flyout--pf-v5-c-menu__item--PaddingBottom
0.5rem
.pf-v5-c-nav .pf-v5-c-menu.pf-m-flyout--pf-v5-c-menu__item--PaddingLeft
1.5rem
.pf-v5-c-nav .pf-v5-c-menu.pf-m-flyout .pf-v5-c-menu__item:hover--pf-v5-c-nav--c-menu__item--after--BorderLeftWidth
1px
.pf-v5-c-nav .pf-v5-c-menu.pf-m-flyout .pf-v5-c-menu__item:hover--pf-v5-c-nav--c-menu__item--after--BorderLeftColor
#8a8d90
.pf-v5-c-nav .pf-v5-c-menu.pf-m-top--pf-v5-c-nav--c-menu--m-flyout--c-menu--Top
auto
.pf-v5-c-nav .pf-v5-c-menu.pf-m-top--pf-v5-c-nav--c-menu--m-flyout--c-menu--Bottom
0
.pf-v5-c-nav .pf-v5-c-menu.pf-m-left--pf-v5-c-nav--c-menu--m-flyout--c-menu--Right
calc(100% - 0.25rem)
.pf-v5-c-nav .pf-v5-c-menu.pf-m-left--pf-v5-c-nav--c-menu--m-flyout--c-menu--Left
auto
.pf-v5-c-nav .pf-v5-c-menu__item.pf-m-current--pf-v5-c-nav--c-menu__item--after--BorderLeftWidth
4px
.pf-v5-c-nav .pf-v5-c-menu__item.pf-m-current--pf-v5-c-nav--c-menu__item--after--BorderLeftColor
#73bcf7
.pf-v5-c-nav .pf-v5-c-menu__list-item:where(.pf-m-drill-up)--pf-v5-c-nav--c-menu__item--before--BorderBottomWidth
3px
.pf-v5-c-nav .pf-v5-c-menu__list-item:where(.pf-m-drill-up) > .pf-v5-c-menu__item--pf-v5-c-menu__item--FontWeight
700
.pf-v5-c-nav.pf-m-horizontal .pf-v5-c-nav__list--pf-v5-c-nav__list--PaddingTop
0
.pf-v5-c-nav.pf-m-horizontal .pf-v5-c-nav__list--pf-v5-c-nav__list--PaddingBottom
0
.pf-v5-c-nav.pf-m-light--pf-v5-c-nav__item--before--BorderColor
#f0f0f0
.pf-v5-c-nav.pf-m-light--pf-v5-c-nav__item--m-current--not--m-expanded__link--BackgroundColor
#f0f0f0
.pf-v5-c-nav.pf-m-light--pf-v5-c-nav__link--Color
#151515
.pf-v5-c-nav.pf-m-light--pf-v5-c-nav__link--hover--Color
#151515
.pf-v5-c-nav.pf-m-light--pf-v5-c-nav__link--focus--Color
#151515
.pf-v5-c-nav.pf-m-light--pf-v5-c-nav__link--active--Color
#151515
.pf-v5-c-nav.pf-m-light--pf-v5-c-nav__link--m-current--Color
#151515
.pf-v5-c-nav.pf-m-light--pf-v5-c-nav__link--hover--BackgroundColor
#f0f0f0
.pf-v5-c-nav.pf-m-light--pf-v5-c-nav__link--focus--BackgroundColor
#f0f0f0
.pf-v5-c-nav.pf-m-light--pf-v5-c-nav__link--active--BackgroundColor
#f0f0f0
.pf-v5-c-nav.pf-m-light--pf-v5-c-nav__link--m-current--BackgroundColor
#f0f0f0
.pf-v5-c-nav.pf-m-light--pf-v5-c-nav__link--before--BorderColor
#f0f0f0
.pf-v5-c-nav.pf-m-light--pf-v5-c-nav__link--after--BorderColor
#06c
.pf-v5-c-nav.pf-m-light--pf-v5-c-nav__link--m-current--after--BorderColor
#06c
.pf-v5-c-nav.pf-m-light--pf-v5-c-nav__subnav__link--hover--after--BorderColor
#d2d2d2
.pf-v5-c-nav.pf-m-light--pf-v5-c-nav__subnav__link--focus--after--BorderColor
#d2d2d2
.pf-v5-c-nav.pf-m-light--pf-v5-c-nav__subnav__link--active--after--BorderColor
#d2d2d2
.pf-v5-c-nav.pf-m-light--pf-v5-c-nav__subnav__link--m-current--after--BorderColor
#06c
.pf-v5-c-nav.pf-m-light--pf-v5-c-nav__section-title--Color
#6a6e73
.pf-v5-c-nav.pf-m-light--pf-v5-c-nav__section-title--BorderBottomColor
#f0f0f0
.pf-v5-c-nav.pf-m-light .pf-v5-c-divider--pf-v5-c-divider--after--BackgroundColor
#f0f0f0
.pf-v5-c-nav.pf-m-horizontal--pf-v5-c-nav__link--PaddingTop
0.5rem
.pf-v5-c-nav.pf-m-horizontal--pf-v5-c-nav__link--PaddingRight
1rem
.pf-v5-c-nav.pf-m-horizontal--pf-v5-c-nav__link--PaddingBottom
0.5rem
.pf-v5-c-nav.pf-m-horizontal--pf-v5-c-nav__link--PaddingLeft
1rem
.pf-v5-c-nav.pf-m-horizontal--pf-v5-c-nav__link--Right
1rem
.pf-v5-c-nav.pf-m-horizontal--pf-v5-c-nav__link--Left
1rem
.pf-v5-c-nav.pf-m-horizontal--pf-v5-c-nav__link--Color
#f0f0f0
.pf-v5-c-nav.pf-m-horizontal--pf-v5-c-nav__link--hover--Color
#73bcf7
.pf-v5-c-nav.pf-m-horizontal--pf-v5-c-nav__link--active--Color
#73bcf7
.pf-v5-c-nav.pf-m-horizontal--pf-v5-c-nav__link--focus--Color
#73bcf7
.pf-v5-c-nav.pf-m-horizontal--pf-v5-c-nav__link--m-current--Color
#73bcf7
.pf-v5-c-nav.pf-m-horizontal--pf-v5-c-nav__link--BackgroundColor
transparent
.pf-v5-c-nav.pf-m-horizontal--pf-v5-c-nav__link--hover--BackgroundColor
transparent
.pf-v5-c-nav.pf-m-horizontal--pf-v5-c-nav__link--focus--BackgroundColor
transparent
.pf-v5-c-nav.pf-m-horizontal--pf-v5-c-nav__link--active--BackgroundColor
transparent
.pf-v5-c-nav.pf-m-horizontal--pf-v5-c-nav__link--m-current--BackgroundColor
transparent
.pf-v5-c-nav.pf-m-horizontal--pf-v5-c-nav__link--before--BorderColor
#73bcf7
.pf-v5-c-nav.pf-m-horizontal--pf-v5-c-nav__link--before--BorderBottomWidth
0
.pf-v5-c-nav.pf-m-horizontal--pf-v5-c-nav__link--hover--before--BorderBottomWidth
3px
.pf-v5-c-nav.pf-m-horizontal--pf-v5-c-nav__link--focus--before--BorderBottomWidth
3px
.pf-v5-c-nav.pf-m-horizontal--pf-v5-c-nav__link--active--before--BorderBottomWidth
3px
.pf-v5-c-nav.pf-m-horizontal--pf-v5-c-nav__link--m-current--before--BorderBottomWidth
3px
.pf-v5-c-nav.pf-m-tertiary--pf-v5-c-nav__link--PaddingTop
0.5rem
.pf-v5-c-nav.pf-m-tertiary--pf-v5-c-nav__link--PaddingRight
1rem
.pf-v5-c-nav.pf-m-tertiary--pf-v5-c-nav__link--PaddingBottom
0.5rem
.pf-v5-c-nav.pf-m-tertiary--pf-v5-c-nav__link--PaddingLeft
1rem
.pf-v5-c-nav.pf-m-tertiary--pf-v5-c-nav__link--Right
1rem
.pf-v5-c-nav.pf-m-tertiary--pf-v5-c-nav__link--Left
1rem
.pf-v5-c-nav.pf-m-tertiary--pf-v5-c-nav__link--Color
#151515
.pf-v5-c-nav.pf-m-tertiary--pf-v5-c-nav__link--hover--Color
#06c
.pf-v5-c-nav.pf-m-tertiary--pf-v5-c-nav__link--active--Color
#06c
.pf-v5-c-nav.pf-m-tertiary--pf-v5-c-nav__link--focus--Color
#06c
.pf-v5-c-nav.pf-m-tertiary--pf-v5-c-nav__link--m-current--Color
#06c
.pf-v5-c-nav.pf-m-tertiary--pf-v5-c-nav__link--BackgroundColor
transparent
.pf-v5-c-nav.pf-m-tertiary--pf-v5-c-nav__link--hover--BackgroundColor
transparent
.pf-v5-c-nav.pf-m-tertiary--pf-v5-c-nav__link--focus--BackgroundColor
transparent
.pf-v5-c-nav.pf-m-tertiary--pf-v5-c-nav__link--active--BackgroundColor
transparent
.pf-v5-c-nav.pf-m-tertiary--pf-v5-c-nav__link--m-current--BackgroundColor
transparent
.pf-v5-c-nav.pf-m-tertiary--pf-v5-c-nav__link--before--BorderColor
#06c
.pf-v5-c-nav.pf-m-tertiary--pf-v5-c-nav__link--before--BorderBottomWidth
0
.pf-v5-c-nav.pf-m-tertiary--pf-v5-c-nav__link--hover--before--BorderBottomWidth
3px
.pf-v5-c-nav.pf-m-tertiary--pf-v5-c-nav__link--focus--before--BorderBottomWidth
3px
.pf-v5-c-nav.pf-m-tertiary--pf-v5-c-nav__link--active--before--BorderBottomWidth
3px
.pf-v5-c-nav.pf-m-tertiary--pf-v5-c-nav__link--m-current--before--BorderBottomWidth
3px
.pf-v5-c-nav.pf-m-tertiary--pf-v5-c-nav__scroll-button--Color
#151515
.pf-v5-c-nav.pf-m-tertiary--pf-v5-c-nav__scroll-button--hover--Color
#06c
.pf-v5-c-nav.pf-m-tertiary--pf-v5-c-nav__scroll-button--focus--Color
#06c
.pf-v5-c-nav.pf-m-tertiary--pf-v5-c-nav__scroll-button--active--Color
#06c
.pf-v5-c-nav.pf-m-tertiary--pf-v5-c-nav__scroll-button--disabled--Color
#d2d2d2
.pf-v5-c-nav.pf-m-tertiary--pf-v5-c-nav__scroll-button--before--BorderColor
#f0f0f0
.pf-v5-c-nav.pf-m-tertiary--pf-v5-c-nav__scroll-button--disabled--before--BorderColor
#f0f0f0
.pf-v5-c-nav.pf-m-horizontal-subnav--pf-v5-c-nav__link--FontSize
0.875rem
.pf-v5-c-nav.pf-m-horizontal-subnav--pf-v5-c-nav__link--PaddingTop
0.5rem
.pf-v5-c-nav.pf-m-horizontal-subnav--pf-v5-c-nav__link--PaddingRight
1rem
.pf-v5-c-nav.pf-m-horizontal-subnav--pf-v5-c-nav__link--PaddingBottom
0.5rem
.pf-v5-c-nav.pf-m-horizontal-subnav--pf-v5-c-nav__link--PaddingLeft
1rem
.pf-v5-c-nav.pf-m-horizontal-subnav--pf-v5-c-nav__link--Color
#f0f0f0
.pf-v5-c-nav.pf-m-horizontal-subnav--pf-v5-c-nav__link--Right
undefined
.pf-v5-c-nav.pf-m-horizontal-subnav--pf-v5-c-nav__link--Left
undefined
.pf-v5-c-nav.pf-m-horizontal-subnav--pf-v5-c-nav__link--hover--Color
#fff
.pf-v5-c-nav.pf-m-horizontal-subnav--pf-v5-c-nav__link--active--Color
#fff
.pf-v5-c-nav.pf-m-horizontal-subnav--pf-v5-c-nav__link--focus--Color
#fff
.pf-v5-c-nav.pf-m-horizontal-subnav--pf-v5-c-nav__link--m-current--Color
#fff
.pf-v5-c-nav.pf-m-horizontal-subnav--pf-v5-c-nav__link--BackgroundColor
transparent
.pf-v5-c-nav.pf-m-horizontal-subnav--pf-v5-c-nav__link--hover--BackgroundColor
#3c3f42
.pf-v5-c-nav.pf-m-horizontal-subnav--pf-v5-c-nav__link--focus--BackgroundColor
#3c3f42
.pf-v5-c-nav.pf-m-horizontal-subnav--pf-v5-c-nav__link--active--BackgroundColor
#3c3f42
.pf-v5-c-nav.pf-m-horizontal-subnav--pf-v5-c-nav__link--m-current--BackgroundColor
#4f5255
.pf-v5-c-nav.pf-m-horizontal-subnav--pf-v5-c-nav__link--before--BorderColor
transparent
.pf-v5-c-nav.pf-m-horizontal-subnav--pf-v5-c-nav__link--after--BorderColor
#3c3f42
.pf-v5-c-nav.pf-m-horizontal-subnav--pf-v5-c-nav__link--hover--after--BorderColor
#3c3f42
.pf-v5-c-nav.pf-m-horizontal-subnav--pf-v5-c-nav__link--active--after--BorderColor
#3c3f42
.pf-v5-c-nav.pf-m-horizontal-subnav--pf-v5-c-nav__link--m-current--after--BorderColor
#3c3f42
.pf-v5-c-nav.pf-m-horizontal-subnav--pf-v5-c-nav__link--after--BorderLeftWidth
1px
.pf-v5-c-nav.pf-m-horizontal-subnav--pf-v5-c-nav__link--hover--after--BorderLeftWidth
1px
.pf-v5-c-nav.pf-m-horizontal-subnav--pf-v5-c-nav__link--active--after--BorderLeftWidth
1px
.pf-v5-c-nav.pf-m-horizontal-subnav--pf-v5-c-nav__link--m-current--after--BorderLeftWidth
1px
.pf-v5-c-nav.pf-m-horizontal-subnav.pf-m-scrollable .pf-v5-c-nav__item:first-child--pf-v5-c-nav__link--after--BorderLeftWidth
0
.pf-v5-c-nav.pf-m-horizontal-subnav.pf-m-scrollable .pf-v5-c-nav__item:first-child--pf-v5-c-nav__link--hover--after--BorderLeftWidth
0
.pf-v5-c-nav.pf-m-horizontal-subnav.pf-m-scrollable .pf-v5-c-nav__item:first-child--pf-v5-c-nav__link--active--after--BorderLeftWidth
0
.pf-v5-c-nav.pf-m-horizontal-subnav.pf-m-scrollable .pf-v5-c-nav__item:first-child--pf-v5-c-nav__link--m-current--after--BorderLeftWidth
0
.pf-v5-c-nav .pf-v5-c-divider--pf-v5-c-divider--after--BackgroundColor
#3c3f42
.pf-v5-c-nav__item.pf-m-expandable--pf-v5-c-nav__link--before--BorderBottomWidth
0
.pf-v5-c-nav__item .pf-v5-c-nav__item.pf-m-expandable--pf-v5-c-nav__toggle--FontSize
0.875rem
.pf-v5-c-nav__item .pf-v5-c-nav__item.pf-m-expandable--pf-v5-c-nav__link--PaddingRight
2rem
.pf-v5-c-nav__item.pf-m-flyout:hover--pf-v5-c-nav__link--BackgroundColor
#3c3f42
.pf-v5-c-nav__item.pf-m-flyout:hover--pf-v5-c-nav__link--before--BorderBottomWidth
0
.pf-v5-c-nav__item.pf-m-flyout:focus--pf-v5-c-nav__link--BackgroundColor
#3c3f42
.pf-v5-c-nav__item.pf-m-flyout:focus--pf-v5-c-nav__link--before--BorderBottomWidth
0
.pf-v5-c-nav__item.pf-m-flyout:active--pf-v5-c-nav__link--BackgroundColor
#3c3f42
.pf-v5-c-nav__item.pf-m-flyout:active--pf-v5-c-nav__link--before--BorderBottomWidth
0
.pf-v5-c-nav__item.pf-m-flyout .pf-v5-c-menu--pf-v5-c-menu--MinWidth
100%
.pf-v5-c-nav__item.pf-m-flyout .pf-v5-c-menu--pf-v5-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-v5-c-nav__item.pf-m-flyout .pf-v5-c-menu--pf-v5-c-menu--BackgroundColor
#212427
.pf-v5-c-nav__item.pf-m-flyout .pf-v5-c-menu--pf-v5-c-menu__list--PaddingTop
0
.pf-v5-c-nav__item.pf-m-flyout .pf-v5-c-menu--pf-v5-c-menu__list--PaddingBottom
0
.pf-v5-c-nav__item.pf-m-flyout .pf-v5-c-menu--pf-v5-c-menu__list-item--hover--BackgroundColor
#3c3f42
.pf-v5-c-nav__item.pf-m-flyout .pf-v5-c-menu--pf-v5-c-menu__list-item--focus-within--BackgroundColor
#3c3f42
.pf-v5-c-nav__item.pf-m-flyout .pf-v5-c-menu--pf-v5-c-menu__list-item--active--BackgroundColor
#3c3f42
.pf-v5-c-nav__item.pf-m-flyout .pf-v5-c-menu--pf-v5-c-menu__item--FontSize
0.875rem
.pf-v5-c-nav__item.pf-m-flyout .pf-v5-c-menu--pf-v5-c-menu__item--Color
#fff
.pf-v5-c-nav__item.pf-m-flyout .pf-v5-c-menu--pf-v5-c-menu__item--PaddingTop
0.5rem
.pf-v5-c-nav__item.pf-m-flyout .pf-v5-c-menu--pf-v5-c-menu__item--PaddingRight
1.5rem
.pf-v5-c-nav__item.pf-m-flyout .pf-v5-c-menu--pf-v5-c-menu__item--PaddingBottom
0.5rem
.pf-v5-c-nav__item.pf-m-flyout .pf-v5-c-menu--pf-v5-c-menu__item--PaddingLeft
1.5rem
.pf-v5-c-nav__item.pf-m-flyout .pf-v5-c-menu--pf-v5-c-menu__item-description--Color
#f0f0f0
.pf-v5-c-nav__item.pf-m-flyout .pf-v5-c-menu--pf-v5-c-nav--c-menu--m-flyout--c-menu--Bottom
calc(0 + 0px)
.pf-v5-c-nav__item.pf-m-flyout .pf-v5-c-menu--pf-v5-c-nav--c-menu--m-flyout--c-menu--Right
calc(100% - 0.25rem)
.pf-v5-c-nav__item.pf-m-flyout .pf-v5-c-menu .pf-v5-c-menu__list-item:first-child--pf-v5-c-nav__item--m-flyout--c-menu--c-menu--Top
0
.pf-v5-c-nav__item.pf-m-flyout .pf-v5-c-menu .pf-v5-c-menu__list-item:first-child--pf-v5-c-nav__item--m-flyout--c-menu__item--hover--after--Top
0
.pf-v5-c-nav__subnav--pf-v5-c-nav__list--PaddingTop
0
.pf-v5-c-nav__subnav--pf-v5-c-nav__list--PaddingBottom
0
.pf-v5-c-nav__subnav--pf-v5-c-nav__link--PaddingTop
0.5rem
.pf-v5-c-nav__subnav--pf-v5-c-nav__link--PaddingRight
1.5rem
.pf-v5-c-nav__subnav--pf-v5-c-nav__link--PaddingBottom
0.5rem
.pf-v5-c-nav__subnav--pf-v5-c-nav__link--PaddingLeft
1.5rem
.pf-v5-c-nav__subnav--pf-v5-c-nav__link--FontSize
0.875rem
.pf-v5-c-nav__subnav--pf-v5-c-nav__link--hover--after--BorderColor
#8a8d90
.pf-v5-c-nav__subnav--pf-v5-c-nav__link--focus--after--BorderColor
#8a8d90
.pf-v5-c-nav__subnav--pf-v5-c-nav__link--active--after--BorderColor
#8a8d90
.pf-v5-c-nav__subnav--pf-v5-c-nav__link--m-current--after--BorderColor
#73bcf7
.pf-v5-c-nav__subnav--pf-v5-c-nav__link--hover--after--BorderLeftWidth
1px
.pf-v5-c-nav__subnav--pf-v5-c-nav__link--focus--after--BorderLeftWidth
1px
.pf-v5-c-nav__subnav--pf-v5-c-nav__link--active--after--BorderLeftWidth
1px
.pf-v5-c-nav__subnav--pf-v5-c-nav__link--m-current--after--BorderLeftWidth
4px
.pf-v5-c-nav__subnav--pf-v5-c-nav--c-divider--PaddingRight
1.5rem
.pf-v5-c-nav__subnav--pf-v5-c-nav--c-divider--PaddingLeft
1.5rem
.pf-v5-c-nav__subnav .pf-v5-c-nav__subnav--pf-v5-c-nav__link--FontSize
0.75rem
.pf-v5-c-nav__subnav .pf-v5-c-nav__subnav--pf-v5-c-nav__link--PaddingLeft
1rem
.pf-v5-c-nav__subnav .pf-v5-c-nav__subnav--pf-v5-c-nav__subnav--PaddingLeft
1.5rem
.pf-v5-c-nav__item.pf-m-expanded .pf-v5-c-nav__subnav--pf-v5-c-nav__subnav--MaxHeight
100%
.pf-v5-c-nav__section--pf-v5-c-nav__item--MarginTop
0.5rem
.pf-v5-c-nav__section--pf-v5-c-nav__link--PaddingTop
0.5rem
.pf-v5-c-nav__section--pf-v5-c-nav__link--PaddingRight
1rem
.pf-v5-c-nav__section--pf-v5-c-nav__link--PaddingBottom
0.5rem
.pf-v5-c-nav__section--pf-v5-c-nav__link--PaddingLeft
1rem
.pf-v5-c-nav__section--pf-v5-c-nav__link--FontSize
1rem
.pf-v5-c-nav__section--pf-v5-c-nav__link--before--BorderBottomWidth
0
.pf-v5-c-nav__section--pf-v5-c-nav__link--hover--after--BorderColor
transparent
.pf-v5-c-nav__section--pf-v5-c-nav__link--focus--after--BorderColor
transparent
.pf-v5-c-nav__section--pf-v5-c-nav__link--active--after--BorderColor
transparent
.pf-v5-c-nav__section--pf-v5-c-nav__link--m-current--after--BorderColor
#73bcf7
.pf-v5-c-nav__section--pf-v5-c-nav__link--hover--after--BorderLeftWidth
0
.pf-v5-c-nav__section--pf-v5-c-nav__link--focus--after--BorderLeftWidth
0
.pf-v5-c-nav__section--pf-v5-c-nav__link--active--after--BorderLeftWidth
0
.pf-v5-c-nav__section--pf-v5-c-nav__link--m-current--after--BorderLeftWidth
4px
.pf-v5-c-nav__section--pf-v5-c-nav__list--PaddingTop
0
.pf-v5-c-nav__section--pf-v5-c-nav__list--PaddingBottom
0
.pf-v5-c-nav__section--pf-v5-c-nav--c-divider--MarginBottom
0
.pf-v5-c-nav__scroll-button:nth-of-type(1)--pf-v5-c-nav__scroll-button--before--BorderRightWidth
1px
.pf-v5-c-nav__scroll-button:nth-of-type(2)--pf-v5-c-nav__scroll-button--before--BorderLeftWidth
1px

View source on GitHub