Skip to content

Navigation

A navigation component organizes and communicates an application's structure and content in a central location, making it easy to find information and accomplish tasks.

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

Nav with flyout

Nav with drilldown menu

Nav with drilldown menu level two

Nav with drilldown menu level three

Nav item icons

Documentation

Overview

The navigation system relies on several different sub-components:

  • .pf-v6-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-v6-c-nav
Describes <nav> landmark.
aria-label="[section title]"
.pf-v6-c-nav__section
Describes a nav <section>, where a .pf-v6-c-nav__section-title is not present.
aria-labelledby="[id value of link describing subnav]"
.pf-v6-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-v6-c-nav__link
Indicates that subnav section is hidden.
aria-expanded="true"
.pf-v6-c-nav__link
Indicates that subnav section is visible.
hidden
.pf-v6-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-v6-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-v6-c-nav__link
Indicates the current page link. Can only occur once on page.
aria-haspopup="true"
.pf-v6-c-nav__link
Declares that a nav item has a submenu.

Usage

Class
Applied to
Outcome
.pf-v6-c-nav
<nav>
Initiates a primary nav element.
.pf-v6-c-nav__subnav
<section>
Initiates a subnav section.
.pf-v6-c-nav__list
<ul>
Initiates nav list.
.pf-v6-c-nav__item
<li>
Initiates nav list item.
.pf-v6-c-nav__link
<a>
Initiates nav list link.
.pf-v6-c-nav__link-icon
<span>
Initiates nav list link icon.
.pf-v6-c-nav__link-text
<span>
Initiates nav list link text.
.pf-v6-c-nav__section
<section>
Initiates a nav section element.
.pf-v6-c-nav__section-title
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
Initiates a nav section title.
.pf-v6-c-nav__toggle
<span>
Initiates the nav toggle wrapper.
.pf-v6-c-nav__toggle-icon
<span>
Initiates a nav toggle icon wrapper.
.pf-v6-c-nav__scroll-button
<button>
Initiates a nav scroll button. Required for horizontal navs
.pf-m-horizontal
.pf-v6-c-nav
Modifies nav for the horizontal variation.
.pf-m-horizontal-subnav
.pf-v6-c-nav
Modifies nav for the horizontal subnav variation.
.pf-m-flyout
.pf-v6-c-nav__item
Modifies nav item for the flyout variation.
.pf-m-scrollable
.pf-v6-c-nav
Modifies nav for the scrollable state.
.pf-m-expanded
.pf-v6-c-nav__item
Modifies for the expanded state.
.pf-m-current
.pf-v6-c-nav__link
Modifies for the current state.
.pf-m-hover
.pf-v6-c-nav__link
Modifies for the hover state.

CSS variables

Expand or collapse columnSelectorVariableValue
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav__link--PaddingBlockStart
0.5rem
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav__link--PaddingBlockEnd
0.5rem
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav__link--PaddingInlineStart
1rem
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav__link--PaddingInlineEnd
1rem
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav__list--RowGap
0.5rem
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav__list--ColumnGap
0.25rem
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav--PaddingBlockStart
1rem
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav--PaddingBlockEnd
1rem
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav--PaddingInlineStart
0
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav--PaddingInlineEnd
0
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav--RowGap
1.5rem
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav--ColumnGap
0
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav--AlignItems
baseline
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav--FontSize
0.875rem
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav--FontWeight
400
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav--LineHeight
1.5
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav--OutlineOffset
calc(0.25rem * -1)
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav--BackgroundColor
transparent
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav__list--ScrollSnapTypeAxis
x
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav__list--ScrollSnapTypeStrictness
proximity
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav__list--ScrollSnapType
x proximity
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav__item--ScrollSnapAlign
end
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav__section-title--FontWeight
500
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav__section-title--Color
(In light theme) #151515
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav__section-title--PaddingBlockStart
0.5rem
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav__section-title--PaddingBlockEnd
0.5rem
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav__section-title--PaddingInlineStart
1rem
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav__section-title--PaddingInlineEnd
1rem
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav__item--RowGap
0.5rem
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav__item__toggle-icon--Rotate
0
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav__item--m-expanded__toggle-icon--Rotate
90deg
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav__link--ColumnGap
0.5rem
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav__link--AlignItems
baseline
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav__link--BorderRadius
6px
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav__link--BackgroundColor
(In light theme) rgba(255, 255, 255, 0.0000)
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav__link--WhiteSpace
normal
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav__link--Color
(In light theme) #4d4d4d
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav__link--hover--Color
(In light theme) #151515
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav__link--hover--BackgroundColor
(In light theme) #ffffff
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav__link--m-current--BackgroundColor
(In light theme) #ffffff
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav__link--m-current--Color
(In light theme) #151515
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav__link-icon--Color
(In light theme) #707070
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav__link--m-current__link-icon--Color
(In light theme) #1f1f1f
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav__subnav--RowGap
3px
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav__subnav--PaddingInlineStart
1rem
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav__scroll-button--BorderColor
(In light theme) #c7c7c7
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav__scroll-button--BorderWidth
1px
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderStartStartRadius
999px
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderEndStartRadius
999px
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav__scroll-button--last-of-type--c-button--BorderStartEndRadius
999px
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav__scroll-button--last-of-type--c-button--BorderEndEndRadius
999px
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav__toggle--PaddingInlineStart
0.5rem
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav__toggle--PaddingInlineEnd
0.5rem
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav__toggle--TranslateY
calc((1.5 * 0.875rem / 2) - 50%)
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav--m-horizontal__list--PaddingBlockStart
0
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav--m-horizontal__list--PaddingBlockEnd
0
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav--m-horizontal__list--PaddingInlineStart
0
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd
0
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineStart
0.25rem
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineEnd
0.25rem
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav--m-horizontal--m-subnav--BackgroundColor
(In light theme) #f2f2f2
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav--m-horizontal--m-subnav--BorderRadius
999px
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingBlockStart
0.25rem
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingBlockEnd
0.25rem
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingInlineStart
1rem
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingInlineEnd
1rem
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav--m-horizontal--m-subnav--m-scrollable__list--PaddingInlineStart
0.25rem
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav--m-horizontal--m-subnav--m-scrollable__list--PaddingInlineEnd
0.25rem
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingBlockStart
0.25rem
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingBlockEnd
0.25rem
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart
1rem
:where(:root, .pf-v6-c-nav)--pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineEnd
1rem
.pf-v6-c-nav.pf-m-inset--pf-v6-c-nav--PaddingInlineStart
1rem
.pf-v6-c-nav.pf-m-inset--pf-v6-c-nav--PaddingInlineEnd
1rem
.pf-v6-c-nav .pf-v6-c-menu--pf-v6-c-menu--MinWidth
100%
.pf-v6-c-nav__nav--pf-v6-c-nav__item--RowGap--row-offset
calc(0.5rem / 2 * -1)
.pf-v6-c-nav__nav--pf-v6-c-nav__link--clickable-inset--Block
calc(0.5rem / 2 * -1)
.pf-v6-c-nav__nav--pf-v6-c-nav__button--RowGap--row-offset
calc(0.5rem * -1)
.pf-v6-c-nav__subnav--pf-v6-c-nav__list--RowGap
3px
.pf-v6-c-nav__link.pf-m-current--pf-v6-c-nav__link-icon--Color
(In light theme) #1f1f1f
.pf-v6-c-nav__item:where(.pf-m-flyout) .pf-v6-c-nav__toggle-icon--pf-v6-c-nav__item--m-expanded__toggle-icon--Rotate
0
.pf-v6-c-nav__scroll-button:first-of-type .pf-v6-c-button--pf-v6-c-button--BorderStartStartRadius
999px
.pf-v6-c-nav__scroll-button:first-of-type .pf-v6-c-button--pf-v6-c-button--BorderEndStartRadius
999px
.pf-v6-c-nav__scroll-button:last-of-type .pf-v6-c-button--pf-v6-c-button--BorderStartEndRadius
999px
.pf-v6-c-nav__scroll-button:last-of-type .pf-v6-c-button--pf-v6-c-button--BorderEndEndRadius
999px
.pf-v6-c-nav:where(.pf-m-horizontal).pf-m-subnav--pf-v6-c-nav--BackgroundColor
(In light theme) #f2f2f2
.pf-v6-c-nav:where(.pf-m-horizontal).pf-m-subnav--pf-v6-c-nav--m-horizontal__list--PaddingBlockStart
0.25rem
.pf-v6-c-nav:where(.pf-m-horizontal).pf-m-subnav--pf-v6-c-nav--m-horizontal__list--PaddingBlockEnd
0.25rem
.pf-v6-c-nav:where(.pf-m-horizontal).pf-m-subnav--pf-v6-c-nav--m-horizontal__list--PaddingInlineStart
1rem
.pf-v6-c-nav:where(.pf-m-horizontal).pf-m-subnav--pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd
1rem
.pf-v6-c-nav:where(.pf-m-horizontal).pf-m-subnav--pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineStart
0.25rem
.pf-v6-c-nav:where(.pf-m-horizontal).pf-m-subnav--pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineEnd
0.25rem
.pf-v6-c-nav:where(.pf-m-horizontal).pf-m-subnav--pf-v6-c-nav__link--PaddingBlockStart
0.25rem
.pf-v6-c-nav:where(.pf-m-horizontal).pf-m-subnav--pf-v6-c-nav__link--PaddingBlockEnd
0.25rem
.pf-v6-c-nav:where(.pf-m-horizontal).pf-m-scrollable--pf-v6-c-nav--m-horizontal__list--PaddingInlineStart
0.25rem
.pf-v6-c-nav:where(.pf-m-horizontal).pf-m-scrollable--pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd
0.25rem

View source on GitHub
Red Hat
Copyright © 2014-2024 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines