Sub-nav

<nav class="p234-subnav" aria-label="Cost of living">
  <ul>
    <li><a href="#" aria-current="page">Petrol</a></li>
    <li><a href="#">Diesel</a></li>
    <li><a href="#">Kerosene</a></li>
    <li><a href="#">Cooking gas</a></li>
    <li><a href="#">Food</a></li>
    <li><a href="#">Transport</a></li>
    <li><a href="#">Healthy diet</a></li>
  </ul>
</nav>

<nav class="p234-subnav" aria-label="Account">
  <ul>
    <li><a href="#">Profile</a></li>
    <li><a href="#" aria-current="page">Saved</a></li>
    <li><a href="#">Following</a></li>
    <li><a href="#">Digest</a></li>
    <li><a href="#">API keys</a></li>
    <li><a href="#">Security</a></li>
  </ul>
</nav>

Scrolls, never wraps

On a phone the row scrolls sideways. Wrapping to a second line pushes the page content down and makes the nav look like content. The scrollbar is hidden, so the overflowing item has to be partly visible at the edge: that sliver is the only thing telling a reader there is more.

Rules

• Mark the current page with aria-current. The underline comes from that attribute, so the two cannot drift apart.
• Give the nav an aria-label naming the section, since a page can carry more than one nav.
• Keep labels to one or two words.

• Do not use it as tabs. Tabs switch a panel in place; this navigates to another page.
• Do not nest a second sub-nav under the first.
• Do not hide the overflow behind a "More" dropdown on a phone. Scrolling is faster than a menu.