HTML

Navigation

ExamplesDocumentationCSS Variables

Examples

Grouped

Expanded with subnav titles

Horizontal in masthead

Tertiary

Documentation

Overiew

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.
  • .pf-c-nav__simple-list - nav list simple is used within .pf-c-nav__subnav in expandable navigation.
  • .pf-c-nav__horizontal-list - nav list horizontal is a shareable component that can be used within the page header, as primary navigation, or as tertiary navigation, when expandable, vertical navigation is implemented.
  • .pf-c-nav__tertiary-list - nav list tertiary is a component that can be used within <main>, as third level navigation (tertiary navigation), when expandable, vertical navigation is implemented.

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.
aria-current="page".pf-c-nav__linkIndicates the current page link. Can only occur once on page.
role="separator".pf-c-nav__separatorIndicates that the divider separates and distinguishes sections of links in the nav.

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 default nav list.
.pf-c-nav__simple-list<ul>Initiates simple nav list.
.pf-c-nav__item<li>Initiates default nav list item.
.pf-c-nav__separator<li>Initiates list separator.
.pf-c-nav__scroll-button<button>Intitiates a nav scroll button. Required for horizontal navs
.pf-c-nav__link<a>Initiates default 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 a chevron indicating expandability of a pf-c-nav__list-link.
.pf-c-nav__toggle-icon<i>Initiates a nav toggle icon.
.pf-m-dark.pf-c-navModifies the nav for the dark variation. Note: only for use with vertical navs, and requires .pf-m-dark on the page component's sidebar element (.pf-c-page__sidebar).
.pf-m-expandable.pf-c-nav__itemModifies for the expandable state.
.pf-m-expanded.pf-c-nav__itemModifies for the expanded state.
.pf-m-hover.pf-c-nav__linkModifies to display the link as hovered.
.pf-m-focus.pf-c-nav__linkModifies to display the link as focussed.
.pf-m-current.pf-c-nav__linkModifies for the current state.
.pf-m-active.pf-c-nav__linkModifies to display the link as active.
.pf-m-disabled.pf-c-nav__linkModifies to display the link as disabled.
.pf-m-start.pf-c-navModifiers the nav to show the overflow at the start.
.pf-m-end.pf-c-navModifiers the nav to show the overflow at the end.

CSS Variables

--pf-c-nav__c-divider--MarginBottomc_nav__c_divider_MarginBottom
0.5rem
--pf-c-nav__c-divider--MarginLeftc_nav__c_divider_MarginLeft
1.5rem
--pf-c-nav__c-divider--MarginTopc_nav__c_divider_MarginTop
0.5rem
--pf-c-nav__horizontal-list-item--MarginRightc_nav__horizontal_list_item_MarginRight
2rem
--pf-c-nav__horizontal-list-link--active--after--BackgroundColorc_nav__horizontal_list_link_active_after_BackgroundColor
#2b9af3
--pf-c-nav__horizontal-list-link--active--Colorc_nav__horizontal_list_link_active_Color
#2b9af3
--pf-c-nav__horizontal-list-link--active--FontWeightc_nav__horizontal_list_link_active_FontWeight
700
--pf-c-nav__horizontal-list-link--after--Heightc_nav__horizontal_list_link_after_Height
0.1875rem
--pf-c-nav__horizontal-list-link--Colorc_nav__horizontal_list_link_Color
#2b9af3
--pf-c-nav__horizontal-list-link--focus--after--BackgroundColorc_nav__horizontal_list_link_focus_after_BackgroundColor
#2b9af3
--pf-c-nav__horizontal-list-link--focus--Colorc_nav__horizontal_list_link_focus_Color
#2b9af3
--pf-c-nav__horizontal-list-link--focus--FontWeightc_nav__horizontal_list_link_focus_FontWeight
700
--pf-c-nav__horizontal-list-link--FontWeightc_nav__horizontal_list_link_FontWeight
700
--pf-c-nav__horizontal-list-link--hover--after--BackgroundColorc_nav__horizontal_list_link_hover_after_BackgroundColor
#2b9af3
--pf-c-nav__horizontal-list-link--hover--Colorc_nav__horizontal_list_link_hover_Color
#2b9af3
--pf-c-nav__horizontal-list-link--lg--PaddingBottomc_nav__horizontal_list_link_lg_PaddingBottom
1.5rem
--pf-c-nav__horizontal-list-link--m-current--after--BackgroundColorc_nav__horizontal_list_link_m_current_after_BackgroundColor
#2b9af3
--pf-c-nav__horizontal-list-link--m-current--Colorc_nav__horizontal_list_link_m_current_Color
#2b9af3
--pf-c-nav__horizontal-list-link--m-current--FontWeightc_nav__horizontal_list_link_m_current_FontWeight
700
--pf-c-nav__horizontal-list-link--md--PaddingTopc_nav__horizontal_list_link_md_PaddingTop
1rem
--pf-c-nav__horizontal-list-link--PaddingBottomc_nav__horizontal_list_link_PaddingBottom
0.5rem
--pf-c-nav__horizontal-list-link--PaddingTopc_nav__horizontal_list_link_PaddingTop
0.5rem
--pf-c-nav__item--m-expanded__toggle-icon--Transformc_nav__item_m_expanded__toggle_icon_Transform
rotate(90deg)
--pf-c-nav__list-link--active--after--BackgroundColorc_nav__list_link_active_after_BackgroundColor
#2b9af3
--pf-c-nav__list-link--active--Colorc_nav__list_link_active_Color
#fff
--pf-c-nav__list-link--active--FontWeightc_nav__list_link_active_FontWeight
400
--pf-c-nav__list-link--after--Bottomc_nav__list_link_after_Bottom
0
--pf-c-nav__list-link--after--Heightc_nav__list_link_after_Height
0.1875rem
--pf-c-nav__list-link--after--Leftc_nav__list_link_after_Left
1rem
--pf-c-nav__list-link--after--md--Leftc_nav__list_link_after_md_Left
1.5rem
--pf-c-nav__list-link--after--Widthc_nav__list_link_after_Width
2.5rem
--pf-c-nav__list-link--Colorc_nav__list_link_Color
#fff
--pf-c-nav__list-link--focus--after--BackgroundColorc_nav__list_link_focus_after_BackgroundColor
#2b9af3
--pf-c-nav__list-link--focus--Colorc_nav__list_link_focus_Color
#fff
--pf-c-nav__list-link--focus--FontWeightc_nav__list_link_focus_FontWeight
400
--pf-c-nav__list-link--FontWeightc_nav__list_link_FontWeight
700
--pf-c-nav__list-link--hover--after--BackgroundColorc_nav__list_link_hover_after_BackgroundColor
#2b9af3
--pf-c-nav__list-link--hover--Colorc_nav__list_link_hover_Color
#fff
--pf-c-nav__list-link--m-current--after--BackgroundColorc_nav__list_link_m_current_after_BackgroundColor
#2b9af3
--pf-c-nav__list-link--m-current--Colorc_nav__list_link_m_current_Color
#fff
--pf-c-nav__list-link--m-current--FontWeightc_nav__list_link_m_current_FontWeight
700
--pf-c-nav__list-link--md--PaddingLeftc_nav__list_link_md_PaddingLeft
1.5rem
--pf-c-nav__list-link--md--PaddingRightc_nav__list_link_md_PaddingRight
1.5rem
--pf-c-nav__list-link--PaddingBottomc_nav__list_link_PaddingBottom
0.5rem
--pf-c-nav__list-link--PaddingLeftc_nav__list_link_PaddingLeft
1rem
--pf-c-nav__list-link--PaddingRightc_nav__list_link_PaddingRight
1rem
--pf-c-nav__list-link--PaddingTopc_nav__list_link_PaddingTop
0.5rem
--pf-c-nav__list-toggle--FontSizec_nav__list_toggle_FontSize
1rem
--pf-c-nav__list-toggle--PaddingLeftc_nav__list_toggle_PaddingLeft
0.5rem
--pf-c-nav__list-toggle--PaddingRightc_nav__list_toggle_PaddingRight
0.5rem
--pf-c-nav__list-toggle--Transitionc_nav__list_toggle_Transition
.2s ease-in 0s
--pf-c-nav__scroll-button--BackgroundColorc_nav__scroll_button_BackgroundColor
#fff
--pf-c-nav__scroll-button--Heightc_nav__scroll_button_Height
2.5rem
--pf-c-nav__scroll-button--hover--Colorc_nav__scroll_button_hover_Color
#004080
--pf-c-nav__scroll-button--m-dark--nth-of-type-1--BoxShadowc_nav__scroll_button_m_dark_nth_of_type_1_BoxShadow
20px 0 10px -4px rgba(21,21,21,0.7)
--pf-c-nav__scroll-button--m-dark--nth-of-type-2--BoxShadowc_nav__scroll_button_m_dark_nth_of_type_2_BoxShadow
-20px 0 10px -4px rgba(21,21,21,0.7)
--pf-c-nav__scroll-button--nth-of-type-1--BoxShadowc_nav__scroll_button_nth_of_type_1_BoxShadow
20px 0 10px -4px hsla(0,0%,100%,0.7)
--pf-c-nav__scroll-button--nth-of-type-2--BoxShadowc_nav__scroll_button_nth_of_type_2_BoxShadow
-20px 0 10px -4px hsla(0,0%,100%,0.7)
--pf-c-nav__scroll-button--PaddingLeftc_nav__scroll_button_PaddingLeft
0.5rem
--pf-c-nav__scroll-button--PaddingRightc_nav__scroll_button_PaddingRight
0.5rem
--pf-c-nav__scroll-button--Topc_nav__scroll_button_Top
0.5rem
--pf-c-nav__scroll-button--Widthc_nav__scroll_button_Width
2rem
--pf-c-nav__scroll-button--ZIndexc_nav__scroll_button_ZIndex
100
--pf-c-nav__section__section--MarginTopc_nav__section__section_MarginTop
2rem
--pf-c-nav__section--MarginTopc_nav__section_MarginTop
2rem
--pf-c-nav__section-title--Colorc_nav__section_title_Color
#fff
--pf-c-nav__section-title--FontSizec_nav__section_title_FontSize
0.875rem
--pf-c-nav__section-title--FontWeightc_nav__section_title_FontWeight
700
--pf-c-nav__section-title--PaddingBottomc_nav__section_title_PaddingBottom
0.5rem
--pf-c-nav__section-title--PaddingLeftc_nav__section_title_PaddingLeft
1.5rem
--pf-c-nav__section-title--PaddingRightc_nav__section_title_PaddingRight
1.5rem
--pf-c-nav__section-title--PaddingTopc_nav__section_title_PaddingTop
0.5rem
--pf-c-nav__separator--BackgroundColorc_nav__separator_BackgroundColor
#212427
--pf-c-nav__separator--Heightc_nav__separator_Height
1px
--pf-c-nav__separator--MarginBottomc_nav__separator_MarginBottom
0.5rem
--pf-c-nav__separator--MarginLeftc_nav__separator_MarginLeft
1.5rem
--pf-c-nav__separator--MarginTopc_nav__separator_MarginTop
0.5rem
--pf-c-nav__simple-list__c-divider--MarginLeftc_nav__simple_list__c_divider_MarginLeft
1.5rem
--pf-c-nav__simple-list__separator--MarginLeftc_nav__simple_list__separator_MarginLeft
1.5rem
--pf-c-nav__simple-list-link--active--BackgroundColorc_nav__simple_list_link_active_BackgroundColor
#4f5255
--pf-c-nav__simple-list-link--active--Colorc_nav__simple_list_link_active_Color
#fff
--pf-c-nav__simple-list-link--active--FontWeightc_nav__simple_list_link_active_FontWeight
700
--pf-c-nav__simple-list-link--Colorc_nav__simple_list_link_Color
#fff
--pf-c-nav__simple-list-link--focus--BackgroundColorc_nav__simple_list_link_focus_BackgroundColor
#4f5255
--pf-c-nav__simple-list-link--focus--Colorc_nav__simple_list_link_focus_Color
#fff
--pf-c-nav__simple-list-link--focus--FontWeightc_nav__simple_list_link_focus_FontWeight
700
--pf-c-nav__simple-list-link--FontWeightc_nav__simple_list_link_FontWeight
700
--pf-c-nav__simple-list-link--hover--BackgroundColorc_nav__simple_list_link_hover_BackgroundColor
#4f5255
--pf-c-nav__simple-list-link--hover--Colorc_nav__simple_list_link_hover_Color
#fff
--pf-c-nav__simple-list-link--m-current--BackgroundColorc_nav__simple_list_link_m_current_BackgroundColor
#4f5255
--pf-c-nav__simple-list-link--m-current--Colorc_nav__simple_list_link_m_current_Color
#fff
--pf-c-nav__simple-list-link--m-current--FontWeightc_nav__simple_list_link_m_current_FontWeight
700
--pf-c-nav__simple-list-link--nested--md--PaddingLeftc_nav__simple_list_link_nested_md_PaddingLeft
calc(1.5rem + 1rem)
--pf-c-nav__simple-list-link--nested--PaddingLeftc_nav__simple_list_link_nested_PaddingLeft
1.5rem
--pf-c-nav__simple-list-link--PaddingBottomc_nav__simple_list_link_PaddingBottom
0.5rem
--pf-c-nav__simple-list-link--PaddingLeftc_nav__simple_list_link_PaddingLeft
1.5rem
--pf-c-nav__simple-list-link--PaddingRightc_nav__simple_list_link_PaddingRight
1.5rem
--pf-c-nav__simple-list-link--PaddingTopc_nav__simple_list_link_PaddingTop
0.5rem
--pf-c-nav__simple-list--nested__c-divider--MarginLeftc_nav__simple_list_nested__c_divider_MarginLeft
1.5rem
--pf-c-nav__simple-list--nested__separator--MarginLeftc_nav__simple_list_nested__separator_MarginLeft
1.5rem
--pf-c-nav__subnav--MarginTopc_nav__subnav_MarginTop
0
--pf-c-nav__subnav--MaxHeightc_nav__subnav_MaxHeight
100%
--pf-c-nav__tertiary-list-item--MarginRightc_nav__tertiary_list_item_MarginRight
2rem
--pf-c-nav__tertiary-list-link--active--after--BackgroundColorc_nav__tertiary_list_link_active_after_BackgroundColor
#004080
--pf-c-nav__tertiary-list-link--active--Colorc_nav__tertiary_list_link_active_Color
#004080
--pf-c-nav__tertiary-list-link--active--FontWeightc_nav__tertiary_list_link_active_FontWeight
700
--pf-c-nav__tertiary-list-link--after--Heightc_nav__tertiary_list_link_after_Height
0.1875rem
--pf-c-nav__tertiary-list-link--Colorc_nav__tertiary_list_link_Color
#004080
--pf-c-nav__tertiary-list-link--focus--after--BackgroundColorc_nav__tertiary_list_link_focus_after_BackgroundColor
#004080
--pf-c-nav__tertiary-list-link--focus--Colorc_nav__tertiary_list_link_focus_Color
#004080
--pf-c-nav__tertiary-list-link--focus--FontWeightc_nav__tertiary_list_link_focus_FontWeight
700
--pf-c-nav__tertiary-list-link--FontWeightc_nav__tertiary_list_link_FontWeight
700
--pf-c-nav__tertiary-list-link--hover--after--BackgroundColorc_nav__tertiary_list_link_hover_after_BackgroundColor
#004080
--pf-c-nav__tertiary-list-link--hover--Colorc_nav__tertiary_list_link_hover_Color
#004080
--pf-c-nav__tertiary-list-link--m-current--after--BackgroundColorc_nav__tertiary_list_link_m_current_after_BackgroundColor
#004080
--pf-c-nav__tertiary-list-link--m-current--Colorc_nav__tertiary_list_link_m_current_Color
#004080
--pf-c-nav__tertiary-list-link--m-current--FontWeightc_nav__tertiary_list_link_m_current_FontWeight
700
--pf-c-nav__tertiary-list-link--PaddingBottomc_nav__tertiary_list_link_PaddingBottom
0.5rem
--pf-c-nav__tertiary-list-link--PaddingTopc_nav__tertiary_list_link_PaddingTop
1rem
--pf-c-nav--m-dark__c-divider--BackgroundColorc_nav_m_dark__c_divider_BackgroundColor
#4f5255
--pf-c-nav--m-dark__item--m-current__c-divider--BackgroundColorc_nav_m_dark__item_m_current__c_divider_BackgroundColor
#212427
--pf-c-nav--m-dark__item--m-current__list-link--Colorc_nav_m_dark__item_m_current__list_link_Color
#fff
--pf-c-nav--m-dark__item--m-current__separator--BackgroundColorc_nav_m_dark__item_m_current__separator_BackgroundColor
#212427
--pf-c-nav--m-dark__item--m-current__simple-list-link--Colorc_nav_m_dark__item_m_current__simple_list_link_Color
#fff
--pf-c-nav--m-dark__item--m-current--BackgroundColorc_nav_m_dark__item_m_current_BackgroundColor
#3c3f42
--pf-c-nav--m-dark__item--m-expanded__list-link--after--Bottomc_nav_m_dark__item_m_expanded__list_link_after_Bottom
0
--pf-c-nav--m-dark__item--m-expanded__list-link--PaddingBottomc_nav_m_dark__item_m_expanded__list_link_PaddingBottom
0.5rem
--pf-c-nav--m-dark__item--m-expanded--PaddingBottomc_nav_m_dark__item_m_expanded_PaddingBottom
0.5rem
--pf-c-nav--m-dark__list-link--active--Colorc_nav_m_dark__list_link_active_Color
#fff
--pf-c-nav--m-dark__list-link--after--Bottomc_nav_m_dark__list_link_after_Bottom
0.5rem
--pf-c-nav--m-dark__list-link--after--Widthc_nav_m_dark__list_link_after_Width
2.5rem
--pf-c-nav--m-dark__list-link--Colorc_nav_m_dark__list_link_Color
#d2d2d2
--pf-c-nav--m-dark__list-link--focus--Colorc_nav_m_dark__list_link_focus_Color
#fff
--pf-c-nav--m-dark__list-link--hover--Colorc_nav_m_dark__list_link_hover_Color
#fff
--pf-c-nav--m-dark__list-link--m-current--Colorc_nav_m_dark__list_link_m_current_Color
#fff
--pf-c-nav--m-dark__list-link--PaddingBottomc_nav_m_dark__list_link_PaddingBottom
1rem
--pf-c-nav--m-dark__list-link--PaddingTopc_nav_m_dark__list_link_PaddingTop
0.5rem
--pf-c-nav--m-dark__section-title--Colorc_nav_m_dark__section_title_Color
#fff
--pf-c-nav--m-dark__separator--BackgroundColorc_nav_m_dark__separator_BackgroundColor
#4f5255
--pf-c-nav--m-dark__simple-list-link--active--BackgroundColorc_nav_m_dark__simple_list_link_active_BackgroundColor
#4f5255
--pf-c-nav--m-dark__simple-list-link--active--Colorc_nav_m_dark__simple_list_link_active_Color
#fff
--pf-c-nav--m-dark__simple-list-link--Colorc_nav_m_dark__simple_list_link_Color
#d2d2d2
--pf-c-nav--m-dark__simple-list-link--focus--BackgroundColorc_nav_m_dark__simple_list_link_focus_BackgroundColor
#4f5255
--pf-c-nav--m-dark__simple-list-link--focus--Colorc_nav_m_dark__simple_list_link_focus_Color
#fff
--pf-c-nav--m-dark__simple-list-link--hover--BackgroundColorc_nav_m_dark__simple_list_link_hover_BackgroundColor
#4f5255
--pf-c-nav--m-dark__simple-list-link--hover--Colorc_nav_m_dark__simple_list_link_hover_Color
#fff
--pf-c-nav--m-dark__simple-list-link--m-current--BackgroundColorc_nav_m_dark__simple_list_link_m_current_BackgroundColor
#4f5255
--pf-c-nav--m-dark__simple-list-link--m-current--Colorc_nav_m_dark__simple_list_link_m_current_Color
#fff
--pf-c-nav--m-dark__subnav--MarginTopc_nav_m_dark__subnav_MarginTop
0
--pf-c-nav--Transitionc_nav_Transition
all 250ms ease-in-out
--pf-c-nav--Widthc_nav_Width
18.125rem