Navigation

Semantic HTML

  • HTML semantics should be observed where applicable.
  • The nav element should be used.
  • When the order of a list of links is important an ordered list should be used.
  • Any action that takes the user to a new page should be an anchor tag.
  • Any action that doesn’t take the user away from the current page should be a button element.

Expected Actions

  • When menu/nav is open the focus is on the first item.
  • When a sub menu/nav is opened the focus is on the first child.
  • When tabbing through menu/nav links focus either needs to stay inside the opened menu or the menu needs to close.
  • Hitting the esc key should cause any open menu to close.
  • All tabbable elements need to have a focus state.

Understandable Content

  • The nav element needs an aria-label or heading element.
  • Any toggle items need link text or an aria-label.
  • All link text should be descriptive.

Base Navigation

Navigation bar

_cmp.header.scss, _cmp.logo.scss, _cmp.nav.scss
example.js
Skip to main content 
<a class="cmp-nav__skip" href="#">Skip to main content</a>
<nav class="cmp-nav">
  <a class="cmp-logo" href="/">
    <img class="cmp-logo__image" aria-label="Site Name" src="https://via.placeholder.com/175x75" alt="Site Name" />
  </a>
  <button class="cmp-nav__button" aria-haspopup="true" aria-expanded="true">Menu</button>
  <div class="cmp-nav__menu">
    <a class="cmp-nav__link" href="#">Nav Link</a>
    <a class="cmp-nav__link" href="#">Nav Link</a>
    <a class="cmp-nav__link" href="#">Nav Link</a>
  </div>
</nav>

Multi-Level Navigation

Skip to main content 
<a class="cmp-nav__skip" href="#">Skip to main content</a>
<nav class="cmp-nav">
  <a class="cmp-logo" href="/">
    <img class="cmp-logo__image" aria-label="Site Name" src="https://via.placeholder.com/175x75" alt="Site Name" />
  </a>
  <button class="cmp-nav__button" aria-haspopup="true" aria-expanded="true">Menu</button>
  <div class="cmp-nav__menu">
    <ul class="cmp-nav__list">
      <li class="cmp-nav__item">
        <a class="cmp-nav__link" href="#">Nav Link</a>
      </li>
      <ul>
        <li class="cmp-nav__item">
          <a class="cmp-nav__link" href="#">SubNav Link</a>
        </li>
        <li class="cmp-nav__item">
          <a class="cmp-nav__link" href="#">SubNav Link</a>
        </li>
      </ul>
      <li class="cmp-nav__item">
        <a class="cmp-nav__link" href="#">Nav Link</a>
      </li>
      <ul>
        <li class="cmp-nav__item">
          <a class="cmp-nav__link" href="#">SubNav Link</a>
        </li>
        <li class="cmp-nav__item">
          <a class="cmp-nav__link" href="#">SubNav Link</a>
        </li>
      </ul>
      <li class="cmp-nav__item">
        <a class="cmp-nav__link" href="#">Nav Link</a>
      </li>
      <ul>
        <li class="cmp-nav__item">
          <a class="cmp-nav__link" href="#">SubNav Link</a>
        </li>
        <li class="cmp-nav__item">
          <a class="cmp-nav__link" href="#">SubNav Link</a>
        </li>
      </ul>
    </ul>
  </div>
</nav>

Overlay Navigation

Skip to main content 
<a class="cmp-nav__skip" href="#">Skip to main content</a>
<nav class="cmp-nav">
  <a class="cmp-logo" href="/">
    <img class="cmp-logo__image" aria-label="Site Name" src="https://via.placeholder.com/175x75" alt="Site Name" />
  </a>
  <button class="cmp-nav__button" aria-haspopup="true" aria-expanded="true">Menu</button>
  <div class="cmp-nav__menu">
    <ul class="cmp-nav__list">
      <li class="cmp-nav__item">
        <a class="cmp-nav__link" href="#">Nav Link</a>
      </li>
      <li class="cmp-nav__item">
        <a class="cmp-nav__link" href="#">Nav Link</a>
      </li>
      <li class="cmp-nav__item">
        <a class="cmp-nav__link" href="#">Nav Link</a>
      </li>
    </ul>
  </div>
</nav>