PF Next

Navigation

Simple Nav

<nav class="pf-c-nav" id="nav-primary-simple" aria-label="Primary Nav, Simple List Example">
  <ul class="pf-c-nav__simple-list">
    <li class="pf-c-nav__item">
      <a href="#" class="pf-c-nav__link pf-m-current" aria-current="page">
        Current link
      </a>
    </li>
    <li class="pf-c-nav__item">
      <a href="#" class="pf-c-nav__link">
        Link 2
      </a>
    </li>
    <li class="pf-c-nav__item">
      <a href="#" class="pf-c-nav__link">
        Link 3
      </a>
    </li>
    <li class="pf-c-nav__item">
      <a href="#" class="pf-c-nav__link">
        Link 4
      </a>
    </li>
  </ul>
</nav>

Grouped Nav

<nav class="pf-c-nav" aria-label="Primary Nav Grouped Example">
  <section class="pf-c-nav__section" aria-labelledby="grouped-title1">
    <h2 class="pf-c-nav__section-title" id="grouped-title1">
      Section title 1
    </h2>
    <ul class="pf-c-nav__simple-list">
      <li class="pf-c-nav__item">
        <a href="#" class="pf-c-nav__link">
          Link 1
        </a>
      </li>
      <li class="pf-c-nav__item">
        <a href="#" class="pf-c-nav__link">
          Disabled link
        </a>
      </li>
      <li class="pf-c-nav__item">
        <a href="#" class="pf-c-nav__link">
          Link 3
        </a>
      </li>
    </ul>
  </section>
  <section class="pf-c-nav__section" aria-labelledby="grouped-title2">
    <h2 class="pf-c-nav__section-title" id="grouped-title2">
      Section title 2
    </h2>
    <ul class="pf-c-nav__simple-list">
      <li class="pf-c-nav__item">
        <a href="#" class="pf-c-nav__link pf-m-current" aria-current="page">
          Current link
        </a>
      </li>
      <li class="pf-c-nav__item">
        <a href="#" class="pf-c-nav__link">
          Link 2
        </a>
      </li>
      <li class="pf-c-nav__item">
        <a href="#" class="pf-c-nav__link">
          Link 3
        </a>
      </li>
    </ul>
  </section>
</nav>

Default Nav

<nav class="pf-c-nav" aria-label="Primary Nav Default Example">
  <ul class="pf-c-nav__list">
    <li class="pf-c-nav__item">
      <a href="#" class="pf-c-nav__link pf-m-current" aria-current="page">
        Current link
      </a>
    </li>
    <li class="pf-c-nav__item">
      <a href="#" class="pf-c-nav__link">
        Link 2
      </a>
    </li>
    <li class="pf-c-nav__item">
      <a href="#" class="pf-c-nav__link">
        Link 3
      </a>
    </li>
    <li class="pf-c-nav__item">
      <a href="#" class="pf-c-nav__link">
        Link 4
      </a>
    </li>
  </ul>
</nav>

Expandable Nav

<nav class="pf-c-nav" aria-label="Primary Nav Expandable Example">
  <ul class="pf-c-nav__list">
    <li class="pf-c-nav__item pf-m-expandable pf-m-expanded pf-m-current">
      <a href="#" class="pf-c-nav__link" id="expandable-example1" aria-expanded="true">
        Link 1 (current and expanded example)
        <span class="pf-c-nav__toggle">
            <i class="fas fa-angle-right" aria-hidden="true"></i>
          </span>
      </a>
      <section class="pf-c-nav__subnav" aria-labelledby="expandable-example1">
        <ul class="pf-c-nav__simple-list">
          <li class="pf-c-nav__item">
            <a href="#" class="pf-c-nav__link pf-m-current" aria-current="page">
              Current link
            </a>
          </li>
          <li class="pf-c-nav__item">
            <a href="#" class="pf-c-nav__link">
              Subnav link 2
            </a>
          </li>
          <li class="pf-c-nav__item">
            <a href="#" class="pf-c-nav__link">
              Subnav link 3
            </a>
          </li>
        </ul>
      </section>
    </li>
    <li class="pf-c-nav__item pf-m-expandable pf-m-expanded">
      <a href="#" class="pf-c-nav__link" id="expandable-example2" aria-expanded="true">
        Link 2 (expanded, but not current example)
        <span class="pf-c-nav__toggle">
            <i class="fas fa-angle-right" aria-hidden="true"></i>
          </span>
      </a>
      <section class="pf-c-nav__subnav" aria-labelledby="expandable-example2">
        <ul class="pf-c-nav__simple-list">
          <li class="pf-c-nav__item">
            <a href="#" class="pf-c-nav__link">
              Subnav link 1
            </a>
          </li>
          <li class="pf-c-nav__item">
            <a href="#" class="pf-c-nav__link">
              Subnav link 2
            </a>
          </li>
        </ul>
      </section>
    </li>
    <li class="pf-c-nav__item pf-m-expandable">
      <a href="#" class="pf-c-nav__link" id="expandable-example3" aria-expanded="false">
        Link 3
        <span class="pf-c-nav__toggle">
            <i class="fas fa-angle-right" aria-hidden="true"></i>
          </span>
      </a>
      <section class="pf-c-nav__subnav" aria-labelledby="expandable-example3" hidden>
        <ul class="pf-c-nav__simple-list">
          <li class="pf-c-nav__item">
            <a href="#" class="pf-c-nav__link">
              Subnav link 1
            </a>
          </li>
          <li class="pf-c-nav__item">
            <a href="#" class="pf-c-nav__link">
              Subnav link 2
            </a>
          </li>
        </ul>
      </section>
    </li>
  </ul>
</nav>

Expandable Nav (w/subnav titles)

Preview

<nav class="pf-c-nav" aria-label="Primary Nav Expandable Example">
  <ul class="pf-c-nav__list">
    <li class="pf-c-nav__item pf-m-expandable pf-m-expanded pf-m-current">
      <a href="#" class="pf-c-nav__link" aria-expanded="true">
        Link 1
        <span class="pf-c-nav__toggle">
            <i class="fas fa-angle-right" aria-hidden="true"></i>
          </span>
      </a>
      <section class="pf-c-nav__subnav" aria-labelledby="subnav-title1">
        <h2 class="pf-c-nav__subnav-title pf-u-sr-only" id="subnav-title1">
          Current and expanded example sub-navigation
        </h2>
        <ul class="pf-c-nav__simple-list">
          <li class="pf-c-nav__item">
            <a href="#" class="pf-c-nav__link pf-m-current" aria-current="page">
              Current link
            </a>
          </li>
          <li class="pf-c-nav__item">
            <a href="#" class="pf-c-nav__link">
              Subnav link 2
            </a>
          </li>
          <li class="pf-c-nav__item">
            <a href="#" class="pf-c-nav__link">
              Subnav link 3
            </a>
          </li>
        </ul>
      </section>
    </li>
    <li class="pf-c-nav__item pf-m-expandable pf-m-expanded">
      <a href="#" class="pf-c-nav__link" aria-expanded="true">
        Link 2
        <span class="pf-c-nav__toggle">
            <i class="fas fa-angle-right" aria-hidden="true"></i>
          </span>
      </a>
      <section class="pf-c-nav__subnav" aria-labelledby="subnav-title2">
        <h2 class="pf-c-nav__subnav-title pf-u-sr-only" id="subnav-title2">
          Expanded, but not current example sub-navigation
        </h2>
        <ul class="pf-c-nav__simple-list">
          <li class="pf-c-nav__item">
            <a href="#" class="pf-c-nav__link">
              Subnav link 1
            </a>
          </li>
          <li class="pf-c-nav__item">
            <a href="#" class="pf-c-nav__link">
              Subnav link 2
            </a>
          </li>
        </ul>
      </section>
    </li>
  </ul>
</nav>

Nav Mixed

<nav class="pf-c-nav" aria-label="Primary Nav Mixed Example">
  <ul class="pf-c-nav__list">
    <li class="pf-c-nav__item">
      <a href="#" class="pf-c-nav__link">
        Link 1 (not expandable)
      </a>
    </li>
    <li class="pf-c-nav__item pf-m-expandable pf-m-expanded">
      <a href="#" class="pf-c-nav__link" id="nav-mixed-link2" aria-expanded="true">
        Link 2 (expanded, but not current example)
        <span class="pf-c-nav__toggle">
            <i class="fas fa-angle-right" aria-hidden="true"></i>
          </span>
      </a>
      <section class="pf-c-nav__subnav" aria-labelledby="nav-mixed-link2">
        <ul class="pf-c-nav__simple-list">
          <li class="pf-c-nav__item">
            <a href="#" class="pf-c-nav__link">
              Subnav link 1
            </a>
          </li>
          <li class="pf-c-nav__item">
            <a href="#" class="pf-c-nav__link">
              Subnav link 2
            </a>
          </li>
        </ul>
      </section>
    </li>
    <li class="pf-c-nav__item pf-m-expandable pf-m-current">
      <a href="#" class="pf-c-nav__link" id="nav-mixed-link4" aria-expanded="false">
        Link 4 (current, but not expanded example)
        <span class="pf-c-nav__toggle">
            <i class="fas fa-angle-right" aria-hidden="true"></i>
          </span>
      </a>
      <section class="pf-c-nav__subnav" aria-labelledby="nav-mixed-link4" hidden>
        <ul class="pf-c-nav__simple-list">
          <li class="pf-c-nav__item">
            <a href="#" class="pf-c-nav__link">
              Subnav link 1
            </a>
          </li>
          <li class="pf-c-nav__item">
            <a href="#" class="pf-c-nav__link pf-m-current" aria-current="page">
              Subnav link 2
            </a>
          </li>
          <li class="pf-c-nav__item">
            <a href="#" class="pf-c-nav__link">
              Subnav link 3
            </a>
          </li>
        </ul>
      </section>
    </li>
  </ul>
</nav>

Horizontal Nav (only in masthead)

<div class="pf-l-page__header-nav">
  <nav class="pf-c-nav" aria-label="Primary Nav Horizontal Example">
    <ul class="pf-c-nav__horizontal-list">
      <li class="pf-c-nav__item">
        <a href="#" class="pf-c-nav__link pf-m-current" aria-current="page">
          Item 1
        </a>
      </li>
      <li class="pf-c-nav__item">
        <a href="#" class="pf-c-nav__link">
          Item 2
        </a>
      </li>
      <li class="pf-c-nav__item">
        <a href="#" class="pf-c-nav__link">
          Item 3
        </a>
      </li>
    </ul>
  </nav>
</div>

Tertiary Nav

<nav class="pf-c-nav" aria-label="Tertiary Example">
  <ul class="pf-c-nav__tertiary-list">
    <li class="pf-c-nav__item">
      <a href="#" class="pf-c-nav__link pf-m-current" aria-current="page">
        Item 1
      </a>
    </li>
    <li class="pf-c-nav__item">
      <a href="#" class="pf-c-nav__link">
        Item 2
      </a>
    </li>
    <li class="pf-c-nav__item">
      <a href="#" class="pf-c-nav__link">
        Item 3
      </a>
    </li>
  </ul>
</nav>

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.

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__item <li> Initiates default nav list item
.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-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-tall .pf-c-nav__horizontal-list Modifies to display the tall horizontal nav. This is related to the page layout for desktop view with a tall header.