HTML

ExamplesDocumentationCSS variables

Examples

Simple nav

Copied to clipboard

Grouped nav

Copied to clipboard

Default nav

Copied to clipboard

Expandable nav

Copied to clipboard

Expandable nav (w/subnav titles)

Copied to clipboard
Copied to clipboard

Horizontal nav (only in masthead)

Copied to clipboard

Horizontal nav overflow (only in masthead)

Copied to clipboard

Tertiary nav

Copied to clipboard

Tertiary nav overflow

Copied to clipboard

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.
  • .pf-c-nav__simple-list - nav list simple is a shareable component this is used with grouped navigation and as secondary 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

Attribute Applied to Outcome
aria-label="[landmark description]" .pf-c-nav Describes <nav> landmark.
aria-labelledby="[id value of link describing subnav]" .pf-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-c-nav__link Indicates that subnav section is hidden.
aria-expanded="true" .pf-c-nav__link Indicates that subnav section is visible.
hidden .pf-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.
aria-current="page" .pf-c-nav__link Indicates the current page link. Can only occur once on page.
role="separator" .pf-c-nav__separator Indicates that the divider separates and distinguishes sections of links in the nav.

Usage

Class Applied to Outcome
.pf-c-nav <nav> Initiates a primary nav element.
.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-nav Modifies 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__item Modifies for the expandable state.
.pf-m-expanded .pf-c-nav__item Modifies for the expanded state.
.pf-m-hover .pf-c-nav__link Modifies to display the link as hovered.
.pf-m-focus .pf-c-nav__link Modifies to display the link as focussed.
.pf-m-current .pf-c-nav__link Modifies for the current state.
.pf-m-active .pf-c-nav__link Modifies to display the link as active.
.pf-m-disabled .pf-c-nav__link Modifies to display the link as disabled.
.pf-m-start .pf-c-nav Modifiers the nav to show the overflow at the start.
.pf-m-end .pf-c-nav Modifiers the nav to show the overflow at the end.

CSS variables

--pf-c-nav--Transitionc_nav_Transitionall 250ms cubic-bezier(0.42,0,0.58,1)
--pf-c-nav--Widthc_nav_Width18.125rem
--pf-c-nav__c-divider--MarginBottomc_nav__c_divider_MarginBottom0.5rem
--pf-c-nav__c-divider--MarginLeftc_nav__c_divider_MarginLeft1.5rem
--pf-c-nav__c-divider--MarginTopc_nav__c_divider_MarginTop0.5rem
--pf-c-nav__horizontal-list-item--MarginRightc_nav__horizontal_list_item_MarginRight2rem
--pf-c-nav__horizontal-list-link--Colorc_nav__horizontal_list_link_Color#2b9af3
--pf-c-nav__horizontal-list-link--FontWeightc_nav__horizontal_list_link_FontWeight700
--pf-c-nav__horizontal-list-link--PaddingBottomc_nav__horizontal_list_link_PaddingBottom0.5rem
--pf-c-nav__horizontal-list-link--PaddingTopc_nav__horizontal_list_link_PaddingTop0.5rem
--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_FontWeight700
--pf-c-nav__horizontal-list-link--active--after--BackgroundColorc_nav__horizontal_list_link_active_after_BackgroundColor#2b9af3
--pf-c-nav__horizontal-list-link--after--Heightc_nav__horizontal_list_link_after_Height0.1875rem
--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_FontWeight700
--pf-c-nav__horizontal-list-link--focus--after--BackgroundColorc_nav__horizontal_list_link_focus_after_BackgroundColor#2b9af3
--pf-c-nav__horizontal-list-link--hover--Colorc_nav__horizontal_list_link_hover_Color#2b9af3
--pf-c-nav__horizontal-list-link--hover--after--BackgroundColorc_nav__horizontal_list_link_hover_after_BackgroundColor#2b9af3
--pf-c-nav__horizontal-list-link--lg--PaddingBottomc_nav__horizontal_list_link_lg_PaddingBottom1.5rem
--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_FontWeight700
--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--md--PaddingTopc_nav__horizontal_list_link_md_PaddingTop1rem
--pf-c-nav__item--m-expanded__toggle-icon--Transformc_nav__item_m_expanded__toggle_icon_Transformrotate(90deg)
--pf-c-nav__list-link--Colorc_nav__list_link_Color#fff
--pf-c-nav__list-link--FontWeightc_nav__list_link_FontWeight700
--pf-c-nav__list-link--PaddingBottomc_nav__list_link_PaddingBottom0.5rem
--pf-c-nav__list-link--PaddingLeftc_nav__list_link_PaddingLeft1rem
--pf-c-nav__list-link--PaddingRightc_nav__list_link_PaddingRight1rem
--pf-c-nav__list-link--PaddingTopc_nav__list_link_PaddingTop0.5rem
--pf-c-nav__list-link--active--Colorc_nav__list_link_active_Color#fff
--pf-c-nav__list-link--active--FontWeightc_nav__list_link_active_FontWeight400
--pf-c-nav__list-link--active--after--BackgroundColorc_nav__list_link_active_after_BackgroundColor#2b9af3
--pf-c-nav__list-link--after--Bottomc_nav__list_link_after_Bottom0
--pf-c-nav__list-link--after--Heightc_nav__list_link_after_Height0.1875rem
--pf-c-nav__list-link--after--Leftc_nav__list_link_after_Left1rem
--pf-c-nav__list-link--after--Widthc_nav__list_link_after_Width2.5rem
--pf-c-nav__list-link--after--md--Leftc_nav__list_link_after_md_Left1.5rem
--pf-c-nav__list-link--focus--Colorc_nav__list_link_focus_Color#fff
--pf-c-nav__list-link--focus--FontWeightc_nav__list_link_focus_FontWeight400
--pf-c-nav__list-link--focus--after--BackgroundColorc_nav__list_link_focus_after_BackgroundColor#2b9af3
--pf-c-nav__list-link--hover--Colorc_nav__list_link_hover_Color#fff
--pf-c-nav__list-link--hover--after--BackgroundColorc_nav__list_link_hover_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_FontWeight700
--pf-c-nav__list-link--m-current--after--BackgroundColorc_nav__list_link_m_current_after_BackgroundColor#2b9af3
--pf-c-nav__list-link--md--PaddingLeftc_nav__list_link_md_PaddingLeft1.5rem
--pf-c-nav__list-link--md--PaddingRightc_nav__list_link_md_PaddingRight1.5rem
--pf-c-nav__list-toggle--FontSizec_nav__list_toggle_FontSize1rem
--pf-c-nav__list-toggle--PaddingLeftc_nav__list_toggle_PaddingLeft0.5rem
--pf-c-nav__list-toggle--PaddingRightc_nav__list_toggle_PaddingRight0.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_Height2.5rem
--pf-c-nav__scroll-button--PaddingLeftc_nav__scroll_button_PaddingLeft0.5rem
--pf-c-nav__scroll-button--PaddingRightc_nav__scroll_button_PaddingRight0.5rem
--pf-c-nav__scroll-button--Topc_nav__scroll_button_Top0.5rem
--pf-c-nav__scroll-button--Widthc_nav__scroll_button_Width2rem
--pf-c-nav__scroll-button--ZIndexc_nav__scroll_button_ZIndex100
--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_BoxShadow20px 0 10px -4px hsla(0,0%,8%,.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 hsla(0,0%,8%,.7)
--pf-c-nav__scroll-button--nth-of-type-1--BoxShadowc_nav__scroll_button_nth_of_type_1_BoxShadow20px 0 10px -4px hsla(0,0%,100%,.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%,.7)
--pf-c-nav__section--MarginTopc_nav__section_MarginTop2rem
--pf-c-nav__section__section--MarginTopc_nav__section__section_MarginTop2rem
--pf-c-nav__section-title--Colorc_nav__section_title_Color#fff
--pf-c-nav__section-title--FontSizec_nav__section_title_FontSize0.875rem
--pf-c-nav__section-title--FontWeightc_nav__section_title_FontWeight700
--pf-c-nav__section-title--PaddingBottomc_nav__section_title_PaddingBottom0.5rem
--pf-c-nav__section-title--PaddingLeftc_nav__section_title_PaddingLeft1.5rem
--pf-c-nav__section-title--PaddingRightc_nav__section_title_PaddingRight1.5rem
--pf-c-nav__section-title--PaddingTopc_nav__section_title_PaddingTop0.5rem
--pf-c-nav__separator--BackgroundColorc_nav__separator_BackgroundColor#212427
--pf-c-nav__separator--Heightc_nav__separator_Height1px
--pf-c-nav__separator--MarginBottomc_nav__separator_MarginBottom0.5rem
--pf-c-nav__separator--MarginLeftc_nav__separator_MarginLeft1.5rem
--pf-c-nav__separator--MarginTopc_nav__separator_MarginTop0.5rem
--pf-c-nav__simple-list__c-divider--MarginLeftc_nav__simple_list__c_divider_MarginLeft1.5rem
--pf-c-nav__simple-list__separator--MarginLeftc_nav__simple_list__separator_MarginLeft1.5rem
--pf-c-nav__simple-list-link--Colorc_nav__simple_list_link_Color#fff
--pf-c-nav__simple-list-link--FontWeightc_nav__simple_list_link_FontWeight700
--pf-c-nav__simple-list-link--PaddingBottomc_nav__simple_list_link_PaddingBottom0.5rem
--pf-c-nav__simple-list-link--PaddingLeftc_nav__simple_list_link_PaddingLeft1.5rem
--pf-c-nav__simple-list-link--PaddingRightc_nav__simple_list_link_PaddingRight1.5rem
--pf-c-nav__simple-list-link--PaddingTopc_nav__simple_list_link_PaddingTop0.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_FontWeight700
--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_FontWeight700
--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_FontWeight700
--pf-c-nav__simple-list-link--nested--PaddingLeftc_nav__simple_list_link_nested_PaddingLeft1.5rem
--pf-c-nav__simple-list-link--nested--md--PaddingLeftc_nav__simple_list_link_nested_md_PaddingLeftcalc(1.5rem + 1rem)
--pf-c-nav__simple-list--nested__c-divider--MarginLeftc_nav__simple_list_nested__c_divider_MarginLeft1.5rem
--pf-c-nav__simple-list--nested__separator--MarginLeftc_nav__simple_list_nested__separator_MarginLeft1.5rem
--pf-c-nav__subnav--MarginTopc_nav__subnav_MarginTop0
--pf-c-nav__subnav--MaxHeightc_nav__subnav_MaxHeight100%
--pf-c-nav__tertiary-list-item--MarginRightc_nav__tertiary_list_item_MarginRight2rem
--pf-c-nav__tertiary-list-link--Colorc_nav__tertiary_list_link_Color#004080
--pf-c-nav__tertiary-list-link--FontWeightc_nav__tertiary_list_link_FontWeight700
--pf-c-nav__tertiary-list-link--PaddingBottomc_nav__tertiary_list_link_PaddingBottom0.5rem
--pf-c-nav__tertiary-list-link--PaddingTopc_nav__tertiary_list_link_PaddingTop1rem
--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_FontWeight700
--pf-c-nav__tertiary-list-link--active--after--BackgroundColorc_nav__tertiary_list_link_active_after_BackgroundColor#004080
--pf-c-nav__tertiary-list-link--after--Heightc_nav__tertiary_list_link_after_Height0.1875rem
--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_FontWeight700
--pf-c-nav__tertiary-list-link--focus--after--BackgroundColorc_nav__tertiary_list_link_focus_after_BackgroundColor#004080
--pf-c-nav__tertiary-list-link--hover--Colorc_nav__tertiary_list_link_hover_Color#004080
--pf-c-nav__tertiary-list-link--hover--after--BackgroundColorc_nav__tertiary_list_link_hover_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_FontWeight700
--pf-c-nav__tertiary-list-link--m-current--after--BackgroundColorc_nav__tertiary_list_link_m_current_after_BackgroundColor#004080
--pf-c-nav--m-dark__c-divider--BackgroundColorc_nav_m_dark__c_divider_BackgroundColor#4f5255
--pf-c-nav--m-dark__item__c-divider--BackgroundColorc_nav_m_dark__item__c_divider_BackgroundColor#212427
--pf-c-nav--m-dark__item__separator--BackgroundColorc_nav_m_dark__item__separator_BackgroundColor#212427
--pf-c-nav--m-dark__item--m-current--BackgroundColorc_nav_m_dark__item_m_current_BackgroundColor#3c3f42
--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__simple-list-link--Colorc_nav_m_dark__item_m_current__simple_list_link_Color#fff
--pf-c-nav--m-dark__item--m-expanded--PaddingBottomc_nav_m_dark__item_m_expanded_PaddingBottom0.5rem
--pf-c-nav--m-dark__item--m-expanded__list-link--PaddingBottomc_nav_m_dark__item_m_expanded__list_link_PaddingBottom0.5rem
--pf-c-nav--m-dark__item--m-expanded__list-link--after--Bottomc_nav_m_dark__item_m_expanded__list_link_after_Bottom0
--pf-c-nav--m-dark__list-link--Colorc_nav_m_dark__list_link_Color#d2d2d2
--pf-c-nav--m-dark__list-link--PaddingBottomc_nav_m_dark__list_link_PaddingBottom1rem
--pf-c-nav--m-dark__list-link--PaddingTopc_nav_m_dark__list_link_PaddingTop0.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_Bottom0.5rem
--pf-c-nav--m-dark__list-link--after--Widthc_nav_m_dark__list_link_after_Width2.5rem
--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__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--Colorc_nav_m_dark__simple_list_link_Color#d2d2d2
--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--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_MarginTop0