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

SelectorVariableValue
.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