Skip to Content
Patternfly Logo

Navigation

ExamplesDocumentationCSS Variables

Examples

Grouped nav

Expanded

Expanded with subnav titles

Mixed

Horizontal

Tertiary

Default in light mode

Expanded in light mode

Documentation

Overview

The navigation system relies on several different sub-components:

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

Accessibility

AttributeApplied toOutcome
aria-label="[landmark description]".pf-c-navDescribes <nav> landmark.
aria-labelledby="[id value of link describing subnav]".pf-c-nav__subnavGives the subnav <section> landmark an accessible name by referring to the element that provides the subnav <section> landmark title.
aria-expanded="false".pf-c-nav__linkIndicates that subnav section is hidden.
aria-expanded="true".pf-c-nav__linkIndicates that subnav section is visible.
hidden.pf-c-nav__subnavIndicates that the subnav section is hidden so that it isn't visible in the UI and isn't accessed by assistive technologies.
disabled.pf-c-nav__scroll-buttonIndicates that a scroll button is disabled, when at the first or last item of a list. Required when disabled
aria-current="page".pf-c-nav__linkIndicates the current page link. Can only occur once on page.

Usage

ClassApplied toOutcome
.pf-c-nav<nav>Initiates a primary nav element.
.pf-c-nav__subnav<section>Initiates a subnav section.
.pf-c-nav__list<ul>Initiates nav list.
.pf-c-nav__item<li>Initiates nav list item.
.pf-c-nav__link<a>Initiates nav list link.
.pf-c-nav__section<section>Initiates a nav section element.
.pf-c-nav__section-title<h1>, <h2>, <h3>, <h4>, <h5>, <h6>Initiates a nav section title.
.pf-c-nav__toggle<span>Initiates the nav toggle wrapper.
.pf-c-nav__toggle-icon<span>Initiates a nav toggle icon wrapper.
.pf-c-nav__scroll-button<button>Initiates a nav scroll button. Required for horizontal navs
.pf-m-horizontal.pf-c-navModifies nav for the horizontal variation.
.pf-m-tertiary.pf-c-navModifies nav for the tertiary variation.
.pf-m-light.pf-c-navModifies 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-c-page__sidebar).
.pf-m-scrollable.pf-c-navModifies nav for the scrollable state.
.pf-m-expandable.pf-c-nav__itemModifies for the expandable state.
.pf-m-expanded.pf-c-nav__itemModifies for the expanded state.
.pf-m-current.pf-c-nav__linkModifies for the current state.

CSS Variables

.pf-c-nav--pf-c-nav--Transitionc_nav_Transition
all 250ms cubic-bezier(.42, 0, .58, 1)
.pf-c-nav--pf-c-nav__item--m-expanded__toggle-icon--Rotatec_nav__item_m_expanded__toggle_icon_Rotate
90deg
.pf-c-nav--pf-c-nav--m-light__item--before--BorderColorc_nav_m_light__item_before_BorderColor
#f0f0f0
.pf-c-nav--pf-c-nav--m-light__item--m-current--not--m-expanded__link--BackgroundColorc_nav_m_light__item_m_current_not_m_expanded__link_BackgroundColor
#f0f0f0
.pf-c-nav--pf-c-nav--m-light__link--Colorc_nav_m_light__link_Color
#151515
.pf-c-nav--pf-c-nav--m-light__link--hover--Colorc_nav_m_light__link_hover_Color
#151515
.pf-c-nav--pf-c-nav--m-light__link--focus--Colorc_nav_m_light__link_focus_Color
#151515
.pf-c-nav--pf-c-nav--m-light__link--active--Colorc_nav_m_light__link_active_Color
#151515
.pf-c-nav--pf-c-nav--m-light__link--m-current--Colorc_nav_m_light__link_m_current_Color
#151515
.pf-c-nav--pf-c-nav--m-light__link--hover--BackgroundColorc_nav_m_light__link_hover_BackgroundColor
#f0f0f0
.pf-c-nav--pf-c-nav--m-light__link--focus--BackgroundColorc_nav_m_light__link_focus_BackgroundColor
#f0f0f0
.pf-c-nav--pf-c-nav--m-light__link--active--BackgroundColorc_nav_m_light__link_active_BackgroundColor
#f0f0f0
.pf-c-nav--pf-c-nav--m-light__link--m-current--BackgroundColorc_nav_m_light__link_m_current_BackgroundColor
#f0f0f0
.pf-c-nav--pf-c-nav--m-light__link--before--BorderColorc_nav_m_light__link_before_BorderColor
#f0f0f0
.pf-c-nav--pf-c-nav--m-light__link--after--BorderColorc_nav_m_light__link_after_BorderColor
#06c
.pf-c-nav--pf-c-nav--m-light__link--m-current--after--BorderColorc_nav_m_light__link_m_current_after_BorderColor
#06c
.pf-c-nav--pf-c-nav--m-light__section-title--Colorc_nav_m_light__section_title_Color
#6a6e73
.pf-c-nav--pf-c-nav--m-light__section-title--BorderBottomColorc_nav_m_light__section_title_BorderBottomColor
#f0f0f0
.pf-c-nav--pf-c-nav--m-light--c-divider--BackgroundColorc_nav_m_light_c_divider_BackgroundColor
#f0f0f0
.pf-c-nav--pf-c-nav--m-light__subnav__link--hover--after--BorderColorc_nav_m_light__subnav__link_hover_after_BorderColor
#d2d2d2
.pf-c-nav--pf-c-nav--m-light__subnav__link--focus--after--BorderColorc_nav_m_light__subnav__link_focus_after_BorderColor
#d2d2d2
.pf-c-nav--pf-c-nav--m-light__subnav__link--active--after--BorderColorc_nav_m_light__subnav__link_active_after_BorderColor
#d2d2d2
.pf-c-nav--pf-c-nav--m-light__subnav__link--m-current--after--BorderColorc_nav_m_light__subnav__link_m_current_after_BorderColor
#06c
.pf-c-nav--pf-c-nav__item--MarginTopc_nav__item_MarginTop
0
.pf-c-nav--pf-c-nav__item--m-current--not--m-expanded__link--BackgroundColorc_nav__item_m_current_not_m_expanded__link_BackgroundColor
#4f5255
.pf-c-nav--pf-c-nav__link--m-current--not--m-expanded__link--after--BorderWidthc_nav__link_m_current_not_m_expanded__link_after_BorderWidth
4px
.pf-c-nav--pf-c-nav__item--before--BorderColorc_nav__item_before_BorderColor
#3c3f42
.pf-c-nav--pf-c-nav__item--before--BorderWidthc_nav__item_before_BorderWidth
1px
.pf-c-nav--pf-c-nav__link--FontSizec_nav__link_FontSize
1rem
.pf-c-nav--pf-c-nav__link--FontWeightc_nav__link_FontWeight
400
.pf-c-nav--pf-c-nav__link--PaddingTopc_nav__link_PaddingTop
1rem
.pf-c-nav--pf-c-nav__link--PaddingRightc_nav__link_PaddingRight
1rem
.pf-c-nav--pf-c-nav__link--PaddingBottomc_nav__link_PaddingBottom
1rem
.pf-c-nav--pf-c-nav__link--PaddingLeftc_nav__link_PaddingLeft
1rem
.pf-c-nav--pf-c-nav__link--xl--PaddingRightc_nav__link_xl_PaddingRight
1.5rem
.pf-c-nav--pf-c-nav__link--xl--PaddingLeftc_nav__link_xl_PaddingLeft
1.5rem
.pf-c-nav--pf-c-nav__link--Colorc_nav__link_Color
#fff
.pf-c-nav--pf-c-nav__link--hover--Colorc_nav__link_hover_Color
#fff
.pf-c-nav--pf-c-nav__link--focus--Colorc_nav__link_focus_Color
#fff
.pf-c-nav--pf-c-nav__link--active--Colorc_nav__link_active_Color
#fff
.pf-c-nav--pf-c-nav__link--m-current--Colorc_nav__link_m_current_Color
#fff
.pf-c-nav--pf-c-nav__link--BackgroundColorc_nav__link_BackgroundColor
transparent
.pf-c-nav--pf-c-nav__link--hover--BackgroundColorc_nav__link_hover_BackgroundColor
#3c3f42
.pf-c-nav--pf-c-nav__link--focus--BackgroundColorc_nav__link_focus_BackgroundColor
#3c3f42
.pf-c-nav--pf-c-nav__link--active--BackgroundColorc_nav__link_active_BackgroundColor
#3c3f42
.pf-c-nav--pf-c-nav__link--m-current--BackgroundColorc_nav__link_m_current_BackgroundColor
#4f5255
.pf-c-nav--pf-c-nav__link--OutlineOffsetc_nav__link_OutlineOffset
calc(0.25rem * -1)
.pf-c-nav--pf-c-nav__link--before--BorderColorc_nav__link_before_BorderColor
#3c3f42
.pf-c-nav--pf-c-nav__link--before--BorderBottomWidthc_nav__link_before_BorderBottomWidth
1px
.pf-c-nav--pf-c-nav__link--hover--before--BorderBottomWidthc_nav__link_hover_before_BorderBottomWidth
0
.pf-c-nav--pf-c-nav__link--focus--before--BorderBottomWidthc_nav__link_focus_before_BorderBottomWidth
0
.pf-c-nav--pf-c-nav__link--active--before--BorderBottomWidthc_nav__link_active_before_BorderBottomWidth
0
.pf-c-nav--pf-c-nav__link--m-current--before--BorderBottomWidthc_nav__link_m_current_before_BorderBottomWidth
0
.pf-c-nav--pf-c-nav__link--after--BorderColorc_nav__link_after_BorderColor
#2b9af3
.pf-c-nav--pf-c-nav__link--hover--after--BorderColorc_nav__link_hover_after_BorderColor
#2b9af3
.pf-c-nav--pf-c-nav__link--focus--after--BorderColorc_nav__link_focus_after_BorderColor
#2b9af3
.pf-c-nav--pf-c-nav__link--active--after--BorderColorc_nav__link_active_after_BorderColor
#2b9af3
.pf-c-nav--pf-c-nav__link--m-current--after--BorderColorc_nav__link_m_current_after_BorderColor
#2b9af3
.pf-c-nav--pf-c-nav__link--after--BorderLeftWidthc_nav__link_after_BorderLeftWidth
0
.pf-c-nav--pf-c-nav__link--hover--after--BorderLeftWidthc_nav__link_hover_after_BorderLeftWidth
0
.pf-c-nav--pf-c-nav__link--focus--after--BorderLeftWidthc_nav__link_focus_after_BorderLeftWidth
0
.pf-c-nav--pf-c-nav__link--active--after--BorderLeftWidthc_nav__link_active_after_BorderLeftWidth
0
.pf-c-nav--pf-c-nav__link--m-current--after--BorderLeftWidthc_nav__link_m_current_after_BorderLeftWidth
4px
.pf-c-nav--pf-c-nav--m-horizontal__link--PaddingTopc_nav_m_horizontal__link_PaddingTop
0.5rem
.pf-c-nav--pf-c-nav--m-horizontal__link--PaddingRightc_nav_m_horizontal__link_PaddingRight
1rem
.pf-c-nav--pf-c-nav--m-horizontal__link--PaddingBottomc_nav_m_horizontal__link_PaddingBottom
0.5rem
.pf-c-nav--pf-c-nav--m-horizontal__link--PaddingLeftc_nav_m_horizontal__link_PaddingLeft
1rem
.pf-c-nav--pf-c-nav--m-horizontal__link--lg--PaddingTopc_nav_m_horizontal__link_lg_PaddingTop
1.5rem
.pf-c-nav--pf-c-nav--m-horizontal__link--lg--PaddingBottomc_nav_m_horizontal__link_lg_PaddingBottom
1.5rem
.pf-c-nav--pf-c-nav--m-horizontal__link--Rightc_nav_m_horizontal__link_Right
1rem
.pf-c-nav--pf-c-nav--m-horizontal__link--Leftc_nav_m_horizontal__link_Left
1rem
.pf-c-nav--pf-c-nav--m-horizontal__link--Colorc_nav_m_horizontal__link_Color
#d2d2d2
.pf-c-nav--pf-c-nav--m-horizontal__link--hover--Colorc_nav_m_horizontal__link_hover_Color
#2b9af3
.pf-c-nav--pf-c-nav--m-horizontal__link--focus--Colorc_nav_m_horizontal__link_focus_Color
#2b9af3
.pf-c-nav--pf-c-nav--m-horizontal__link--active--Colorc_nav_m_horizontal__link_active_Color
#2b9af3
.pf-c-nav--pf-c-nav--m-horizontal__link--m-current--Colorc_nav_m_horizontal__link_m_current_Color
#2b9af3
.pf-c-nav--pf-c-nav--m-horizontal__link--BackgroundColorc_nav_m_horizontal__link_BackgroundColor
transparent
.pf-c-nav--pf-c-nav--m-horizontal__link--hover--BackgroundColorc_nav_m_horizontal__link_hover_BackgroundColor
transparent
.pf-c-nav--pf-c-nav--m-horizontal__link--focus--BackgroundColorc_nav_m_horizontal__link_focus_BackgroundColor
transparent
.pf-c-nav--pf-c-nav--m-horizontal__link--active--BackgroundColorc_nav_m_horizontal__link_active_BackgroundColor
transparent
.pf-c-nav--pf-c-nav--m-horizontal__link--m-current--BackgroundColorc_nav_m_horizontal__link_m_current_BackgroundColor
transparent
.pf-c-nav--pf-c-nav--m-horizontal__link--before--BorderColorc_nav_m_horizontal__link_before_BorderColor
#2b9af3
.pf-c-nav--pf-c-nav--m-horizontal__link--before--BorderWidthc_nav_m_horizontal__link_before_BorderWidth
0
.pf-c-nav--pf-c-nav--m-horizontal__link--hover--before--BorderWidthc_nav_m_horizontal__link_hover_before_BorderWidth
3px
.pf-c-nav--pf-c-nav--m-horizontal__link--focus--before--BorderWidthc_nav_m_horizontal__link_focus_before_BorderWidth
3px
.pf-c-nav--pf-c-nav--m-horizontal__link--active--before--BorderWidthc_nav_m_horizontal__link_active_before_BorderWidth
3px
.pf-c-nav--pf-c-nav--m-horizontal__link--m-current--before--BorderWidthc_nav_m_horizontal__link_m_current_before_BorderWidth
3px
.pf-c-nav--pf-c-nav--m-tertiary__link--PaddingTopc_nav_m_tertiary__link_PaddingTop
0.5rem
.pf-c-nav--pf-c-nav--m-tertiary__link--PaddingRightc_nav_m_tertiary__link_PaddingRight
1rem
.pf-c-nav--pf-c-nav--m-tertiary__link--PaddingBottomc_nav_m_tertiary__link_PaddingBottom
0.5rem
.pf-c-nav--pf-c-nav--m-tertiary__link--PaddingLeftc_nav_m_tertiary__link_PaddingLeft
1rem
.pf-c-nav--pf-c-nav--m-tertiary__link--Rightc_nav_m_tertiary__link_Right
1rem
.pf-c-nav--pf-c-nav--m-tertiary__link--Leftc_nav_m_tertiary__link_Left
1rem
.pf-c-nav--pf-c-nav--m-tertiary__link--Colorc_nav_m_tertiary__link_Color
#151515
.pf-c-nav--pf-c-nav--m-tertiary__link--hover--Colorc_nav_m_tertiary__link_hover_Color
#06c
.pf-c-nav--pf-c-nav--m-tertiary__link--focus--Colorc_nav_m_tertiary__link_focus_Color
#06c
.pf-c-nav--pf-c-nav--m-tertiary__link--active--Colorc_nav_m_tertiary__link_active_Color
#06c
.pf-c-nav--pf-c-nav--m-tertiary__link--m-current--Colorc_nav_m_tertiary__link_m_current_Color
#06c
.pf-c-nav--pf-c-nav--m-tertiary__link--BackgroundColorc_nav_m_tertiary__link_BackgroundColor
transparent
.pf-c-nav--pf-c-nav--m-tertiary__link--hover--BackgroundColorc_nav_m_tertiary__link_hover_BackgroundColor
transparent
.pf-c-nav--pf-c-nav--m-tertiary__link--focus--BackgroundColorc_nav_m_tertiary__link_focus_BackgroundColor
transparent
.pf-c-nav--pf-c-nav--m-tertiary__link--active--BackgroundColorc_nav_m_tertiary__link_active_BackgroundColor
transparent
.pf-c-nav--pf-c-nav--m-tertiary__link--m-current--BackgroundColorc_nav_m_tertiary__link_m_current_BackgroundColor
transparent
.pf-c-nav--pf-c-nav--m-tertiary__link--before--BorderColorc_nav_m_tertiary__link_before_BorderColor
#06c
.pf-c-nav--pf-c-nav--m-tertiary__link--before--BorderWidthc_nav_m_tertiary__link_before_BorderWidth
0
.pf-c-nav--pf-c-nav--m-tertiary__link--hover--before--BorderWidthc_nav_m_tertiary__link_hover_before_BorderWidth
3px
.pf-c-nav--pf-c-nav--m-tertiary__link--focus--before--BorderWidthc_nav_m_tertiary__link_focus_before_BorderWidth
3px
.pf-c-nav--pf-c-nav--m-tertiary__link--active--before--BorderWidthc_nav_m_tertiary__link_active_before_BorderWidth
3px
.pf-c-nav--pf-c-nav--m-tertiary__link--m-current--before--BorderWidthc_nav_m_tertiary__link_m_current_before_BorderWidth
3px
.pf-c-nav--pf-c-nav--m-tertiary__scroll-button--Colorc_nav_m_tertiary__scroll_button_Color
#151515
.pf-c-nav--pf-c-nav--m-tertiary__scroll-button--hover--Colorc_nav_m_tertiary__scroll_button_hover_Color
#06c
.pf-c-nav--pf-c-nav--m-tertiary__scroll-button--focus--Colorc_nav_m_tertiary__scroll_button_focus_Color
#06c
.pf-c-nav--pf-c-nav--m-tertiary__scroll-button--active--Colorc_nav_m_tertiary__scroll_button_active_Color
#06c
.pf-c-nav--pf-c-nav--m-tertiary__scroll-button--disabled--Colorc_nav_m_tertiary__scroll_button_disabled_Color
#d2d2d2
.pf-c-nav--pf-c-nav--m-tertiary__scroll-button--before--BorderColorc_nav_m_tertiary__scroll_button_before_BorderColor
#f0f0f0
.pf-c-nav--pf-c-nav--m-tertiary__scroll-button--disabled--before--BorderColorc_nav_m_tertiary__scroll_button_disabled_before_BorderColor
#f0f0f0
.pf-c-nav--pf-c-nav__subnav--PaddingBottomc_nav__subnav_PaddingBottom
1rem
.pf-c-nav--pf-c-nav__subnav--xl--PaddingLeftc_nav__subnav_xl_PaddingLeft
1rem
.pf-c-nav--pf-c-nav__subnav__link--MarginTopc_nav__subnav__link_MarginTop
0
.pf-c-nav--pf-c-nav__subnav__link--PaddingTopc_nav__subnav__link_PaddingTop
0.5rem
.pf-c-nav--pf-c-nav__subnav__link--PaddingRightc_nav__subnav__link_PaddingRight
1.5rem
.pf-c-nav--pf-c-nav__subnav__link--PaddingBottomc_nav__subnav__link_PaddingBottom
0.5rem
.pf-c-nav--pf-c-nav__subnav__link--PaddingLeftc_nav__subnav__link_PaddingLeft
1.5rem
.pf-c-nav--pf-c-nav__subnav__link--FontSizec_nav__subnav__link_FontSize
0.875rem
.pf-c-nav--pf-c-nav__subnav__link--hover--after--BorderColorc_nav__subnav__link_hover_after_BorderColor
#8a8d90
.pf-c-nav--pf-c-nav__subnav__link--focus--after--BorderColorc_nav__subnav__link_focus_after_BorderColor
#8a8d90
.pf-c-nav--pf-c-nav__subnav__link--active--after--BorderColorc_nav__subnav__link_active_after_BorderColor
#8a8d90
.pf-c-nav--pf-c-nav__subnav__link--m-current--after--BorderColorc_nav__subnav__link_m_current_after_BorderColor
#2b9af3
.pf-c-nav--pf-c-nav__subnav__link--hover--after--BorderWidthc_nav__subnav__link_hover_after_BorderWidth
1px
.pf-c-nav--pf-c-nav__subnav__link--focus--after--BorderWidthc_nav__subnav__link_focus_after_BorderWidth
1px
.pf-c-nav--pf-c-nav__subnav__link--active--after--BorderWidthc_nav__subnav__link_active_after_BorderWidth
1px
.pf-c-nav--pf-c-nav__subnav__link--m-current--after--BorderWidthc_nav__subnav__link_m_current_after_BorderWidth
4px
.pf-c-nav--pf-c-nav__subnav--MaxHeightc_nav__subnav_MaxHeight
0
.pf-c-nav--pf-c-nav__item--m-expanded__subnav--MaxHeightc_nav__item_m_expanded__subnav_MaxHeight
100%
.pf-c-nav--pf-c-nav__subnav--c-divider--PaddingRightc_nav__subnav_c_divider_PaddingRight
1.5rem
.pf-c-nav--pf-c-nav__subnav--c-divider--PaddingLeftc_nav__subnav_c_divider_PaddingLeft
1.5rem
.pf-c-nav--pf-c-nav__section--MarginTopc_nav__section_MarginTop
0.5rem
.pf-c-nav--pf-c-nav__section__item--MarginTopc_nav__section__item_MarginTop
0.5rem
.pf-c-nav--pf-c-nav__section__link--PaddingTopc_nav__section__link_PaddingTop
0.5rem
.pf-c-nav--pf-c-nav__section__link--PaddingRightc_nav__section__link_PaddingRight
1rem
.pf-c-nav--pf-c-nav__section__link--PaddingBottomc_nav__section__link_PaddingBottom
0.5rem
.pf-c-nav--pf-c-nav__section__link--PaddingLeftc_nav__section__link_PaddingLeft
1rem
.pf-c-nav--pf-c-nav__section__link--xl--PaddingRightc_nav__section__link_xl_PaddingRight
1.5rem
.pf-c-nav--pf-c-nav__section__link--xl--PaddingLeftc_nav__section__link_xl_PaddingLeft
1.5rem
.pf-c-nav--pf-c-nav__section__link--FontSizec_nav__section__link_FontSize
1rem
.pf-c-nav--pf-c-nav__section__link--before--BorderBottomWidthc_nav__section__link_before_BorderBottomWidth
0
.pf-c-nav--pf-c-nav__section__link--hover--after--BorderColorc_nav__section__link_hover_after_BorderColor
transparent
.pf-c-nav--pf-c-nav__section__link--focus--after--BorderColorc_nav__section__link_focus_after_BorderColor
transparent
.pf-c-nav--pf-c-nav__section__link--active--after--BorderColorc_nav__section__link_active_after_BorderColor
transparent
.pf-c-nav--pf-c-nav__section__link--m-current--after--BorderColorc_nav__section__link_m_current_after_BorderColor
#2b9af3
.pf-c-nav--pf-c-nav__section__link--hover--after--BorderWidthc_nav__section__link_hover_after_BorderWidth
0
.pf-c-nav--pf-c-nav__section__link--focus--after--BorderWidthc_nav__section__link_focus_after_BorderWidth
0
.pf-c-nav--pf-c-nav__section__link--active--after--BorderWidthc_nav__section__link_active_after_BorderWidth
0
.pf-c-nav--pf-c-nav__section__link--m-current--after--BorderWidthc_nav__section__link_m_current_after_BorderWidth
4px
.pf-c-nav--pf-c-nav__section--section--MarginTopc_nav__section_section_MarginTop
2rem
.pf-c-nav--pf-c-nav__section-title--PaddingTopc_nav__section_title_PaddingTop
0.5rem
.pf-c-nav--pf-c-nav__section-title--PaddingRightc_nav__section_title_PaddingRight
1rem
.pf-c-nav--pf-c-nav__section-title--PaddingBottomc_nav__section_title_PaddingBottom
0.5rem
.pf-c-nav--pf-c-nav__section-title--PaddingLeftc_nav__section_title_PaddingLeft
1rem
.pf-c-nav--pf-c-nav__section-title--xl--PaddingRightc_nav__section_title_xl_PaddingRight
1.5rem
.pf-c-nav--pf-c-nav__section-title--xl--PaddingLeftc_nav__section_title_xl_PaddingLeft
1.5rem
.pf-c-nav--pf-c-nav__section-title--FontSizec_nav__section_title_FontSize
0.875rem
.pf-c-nav--pf-c-nav__section-title--Colorc_nav__section_title_Color
#fff
.pf-c-nav--pf-c-nav__section-title--BorderBottomColorc_nav__section_title_BorderBottomColor
#3c3f42
.pf-c-nav--pf-c-nav__section-title--BorderBottomWidthc_nav__section_title_BorderBottomWidth
1px
.pf-c-nav--pf-c-nav__scroll-button--Colorc_nav__scroll_button_Color
#fff
.pf-c-nav--pf-c-nav__scroll-button--hover--Colorc_nav__scroll_button_hover_Color
#2b9af3
.pf-c-nav--pf-c-nav__scroll-button--focus--Colorc_nav__scroll_button_focus_Color
#2b9af3
.pf-c-nav--pf-c-nav__scroll-button--active--Colorc_nav__scroll_button_active_Color
#2b9af3
.pf-c-nav--pf-c-nav__scroll-button--disabled--Colorc_nav__scroll_button_disabled_Color
#6a6e73
.pf-c-nav--pf-c-nav__scroll-button--BackgroundColorc_nav__scroll_button_BackgroundColor
transparent
.pf-c-nav--pf-c-nav__scroll-button--Widthc_nav__scroll_button_Width
44px
.pf-c-nav--pf-c-nav__scroll-button--OutlineOffsetc_nav__scroll_button_OutlineOffset
calc(-1 * 0.25rem)
.pf-c-nav--pf-c-nav__scroll-button--Transitionc_nav__scroll_button_Transition
margin .125s, transform .125s, opacity .125s
.pf-c-nav--pf-c-nav__scroll-button--before--BorderColorc_nav__scroll_button_before_BorderColor
#3c3f42
.pf-c-nav--pf-c-nav__scroll-button--before--BorderWidthc_nav__scroll_button_before_BorderWidth
1px
.pf-c-nav--pf-c-nav__scroll-button--before--BorderRightWidthc_nav__scroll_button_before_BorderRightWidth
0
.pf-c-nav--pf-c-nav__scroll-button--before--BorderLeftWidthc_nav__scroll_button_before_BorderLeftWidth
0
.pf-c-nav--pf-c-nav__scroll-button--disabled--before--BorderColorc_nav__scroll_button_disabled_before_BorderColor
transparent
.pf-c-nav--pf-c-nav__toggle--PaddingRightc_nav__toggle_PaddingRight
0.5rem
.pf-c-nav--pf-c-nav__toggle--PaddingLeftc_nav__toggle_PaddingLeft
0.5rem
.pf-c-nav--pf-c-nav__toggle--FontSizec_nav__toggle_FontSize
1.125rem
.pf-c-nav--pf-c-nav__toggle-icon--Transitionc_nav__toggle_icon_Transition
250ms
.pf-c-nav--pf-c-nav--c-divider--MarginTopc_nav_c_divider_MarginTop
0.5rem
.pf-c-nav--pf-c-nav--c-divider--MarginBottomc_nav_c_divider_MarginBottom
0.5rem
.pf-c-nav--pf-c-nav--c-divider--PaddingRightc_nav_c_divider_PaddingRight
0
.pf-c-nav--pf-c-nav--c-divider--PaddingLeftc_nav_c_divider_PaddingLeft
0
.pf-c-nav--pf-c-nav--c-divider--BackgroundColorc_nav_c_divider_BackgroundColor
#3c3f42
.pf-c-nav.pf-m-light--pf-c-nav__item--before--BorderColorc_nav__item_before_BorderColor
#f0f0f0
.pf-c-nav.pf-m-light--pf-c-nav__item--m-current--not--m-expanded__link--BackgroundColorc_nav__item_m_current_not_m_expanded__link_BackgroundColor
#f0f0f0
.pf-c-nav.pf-m-light--pf-c-nav__link--Colorc_nav__link_Color
#151515
.pf-c-nav.pf-m-light--pf-c-nav__link--hover--Colorc_nav__link_hover_Color
#151515
.pf-c-nav.pf-m-light--pf-c-nav__link--focus--Colorc_nav__link_focus_Color
#151515
.pf-c-nav.pf-m-light--pf-c-nav__link--active--Colorc_nav__link_active_Color
#151515
.pf-c-nav.pf-m-light--pf-c-nav__link--m-current--Colorc_nav__link_m_current_Color
#151515
.pf-c-nav.pf-m-light--pf-c-nav__link--hover--BackgroundColorc_nav__link_hover_BackgroundColor
#f0f0f0
.pf-c-nav.pf-m-light--pf-c-nav__link--focus--BackgroundColorc_nav__link_focus_BackgroundColor
#f0f0f0
.pf-c-nav.pf-m-light--pf-c-nav__link--active--BackgroundColorc_nav__link_active_BackgroundColor
#f0f0f0
.pf-c-nav.pf-m-light--pf-c-nav__link--m-current--BackgroundColorc_nav__link_m_current_BackgroundColor
#f0f0f0
.pf-c-nav.pf-m-light--pf-c-nav__link--before--BorderColorc_nav__link_before_BorderColor
#f0f0f0
.pf-c-nav.pf-m-light--pf-c-nav__link--after--BorderColorc_nav__link_after_BorderColor
#06c
.pf-c-nav.pf-m-light--pf-c-nav__link--m-current--after--BorderColorc_nav__link_m_current_after_BorderColor
#06c
.pf-c-nav.pf-m-light--pf-c-nav__subnav__link--hover--after--BorderColorc_nav__subnav__link_hover_after_BorderColor
#d2d2d2
.pf-c-nav.pf-m-light--pf-c-nav__subnav__link--focus--after--BorderColorc_nav__subnav__link_focus_after_BorderColor
#d2d2d2
.pf-c-nav.pf-m-light--pf-c-nav__subnav__link--active--after--BorderColorc_nav__subnav__link_active_after_BorderColor
#d2d2d2
.pf-c-nav.pf-m-light--pf-c-nav__subnav__link--m-current--after--BorderColorc_nav__subnav__link_m_current_after_BorderColor
#06c
.pf-c-nav.pf-m-light--pf-c-nav__section-title--Colorc_nav__section_title_Color
#6a6e73
.pf-c-nav.pf-m-light--pf-c-nav__section-title--BorderBottomColorc_nav__section_title_BorderBottomColor
#f0f0f0
.pf-c-nav.pf-m-light .pf-c-divider--pf-c-divider--after--BackgroundColorc_divider_after_BackgroundColor
#f0f0f0
.pf-c-nav.pf-m-horizontal--pf-c-nav__link--PaddingTopc_nav__link_PaddingTop
0.5rem
.pf-c-nav.pf-m-horizontal--pf-c-nav__link--PaddingRightc_nav__link_PaddingRight
1rem
.pf-c-nav.pf-m-horizontal--pf-c-nav__link--PaddingBottomc_nav__link_PaddingBottom
0.5rem
.pf-c-nav.pf-m-horizontal--pf-c-nav__link--PaddingLeftc_nav__link_PaddingLeft
1rem
.pf-c-nav.pf-m-horizontal--pf-c-nav__link--Rightc_nav__link_Right
1rem
.pf-c-nav.pf-m-horizontal--pf-c-nav__link--Leftc_nav__link_Left
1rem
.pf-c-nav.pf-m-horizontal--pf-c-nav__link--Colorc_nav__link_Color
#d2d2d2
.pf-c-nav.pf-m-horizontal--pf-c-nav__link--hover--Colorc_nav__link_hover_Color
#2b9af3
.pf-c-nav.pf-m-horizontal--pf-c-nav__link--active--Colorc_nav__link_active_Color
#2b9af3
.pf-c-nav.pf-m-horizontal--pf-c-nav__link--focus--Colorc_nav__link_focus_Color
#2b9af3
.pf-c-nav.pf-m-horizontal--pf-c-nav__link--m-current--Colorc_nav__link_m_current_Color
#2b9af3
.pf-c-nav.pf-m-horizontal--pf-c-nav__link--BackgroundColorc_nav__link_BackgroundColor
transparent
.pf-c-nav.pf-m-horizontal--pf-c-nav__link--hover--BackgroundColorc_nav__link_hover_BackgroundColor
transparent
.pf-c-nav.pf-m-horizontal--pf-c-nav__link--focus--BackgroundColorc_nav__link_focus_BackgroundColor
transparent
.pf-c-nav.pf-m-horizontal--pf-c-nav__link--active--BackgroundColorc_nav__link_active_BackgroundColor
transparent
.pf-c-nav.pf-m-horizontal--pf-c-nav__link--m-current--BackgroundColorc_nav__link_m_current_BackgroundColor
transparent
.pf-c-nav.pf-m-horizontal--pf-c-nav__link--before--BorderColorc_nav__link_before_BorderColor
#2b9af3
.pf-c-nav.pf-m-horizontal--pf-c-nav__link--before--BorderBottomWidthc_nav__link_before_BorderBottomWidth
0
.pf-c-nav.pf-m-horizontal--pf-c-nav__link--hover--before--BorderBottomWidthc_nav__link_hover_before_BorderBottomWidth
3px
.pf-c-nav.pf-m-horizontal--pf-c-nav__link--focus--before--BorderBottomWidthc_nav__link_focus_before_BorderBottomWidth
3px
.pf-c-nav.pf-m-horizontal--pf-c-nav__link--active--before--BorderBottomWidthc_nav__link_active_before_BorderBottomWidth
3px
.pf-c-nav.pf-m-horizontal--pf-c-nav__link--m-current--before--BorderBottomWidthc_nav__link_m_current_before_BorderBottomWidth
3px
.pf-c-nav.pf-m-tertiary--pf-c-nav__link--PaddingTopc_nav__link_PaddingTop
0.5rem
.pf-c-nav.pf-m-tertiary--pf-c-nav__link--PaddingRightc_nav__link_PaddingRight
1rem
.pf-c-nav.pf-m-tertiary--pf-c-nav__link--PaddingBottomc_nav__link_PaddingBottom
0.5rem
.pf-c-nav.pf-m-tertiary--pf-c-nav__link--PaddingLeftc_nav__link_PaddingLeft
1rem
.pf-c-nav.pf-m-tertiary--pf-c-nav__link--Rightc_nav__link_Right
1rem
.pf-c-nav.pf-m-tertiary--pf-c-nav__link--Leftc_nav__link_Left
1rem
.pf-c-nav.pf-m-tertiary--pf-c-nav__link--Colorc_nav__link_Color
#151515