Tabs

Tabs split one subject into a few views: the details of a customer, their orders, their invoices. The row of tabs sits on a line, and the active tab is cut out of that line so it reads as part of the content below.

A tab is a link. Each tab leads to its own page or URL, and the page marks the tab it belongs to as active. That keeps every view linkable and makes the back button work, without any JavaScript.

In use: the invoice detail example switches its tabs with a link per tab, and the catalogue progress example uses tabs with counts as a filter.

Put the class tabs on a <nav> with a list of links in it. Mark the current tab with class="active" on the list item, aria-current="page" on the link, or both. A list item with the class disabled can't be chosen.

<nav class="tabs" aria-label="Customer">
  <ul>
    <li class="active"><a href="/customers/42" aria-current="page">Details</a></li>
    <li><a href="/customers/42/orders">Orders</a></li>
    <li><a href="/customers/42/invoices">Invoices</a></li>
    <li><a href="/customers/42/notes">Notes</a></li>
    <li class="disabled"><a>Statistics</a></li>
  </ul>
</nav>

Accessibility: give the <nav> an aria-label that says what the tabs belong to, and set aria-current="page" on the active link so screen readers announce it. When the row is wider than the screen it scrolls sideways; the tabs never wrap onto a second line.

An icon in front of the text and a badge behind it both find their place without extra classes. Use a badge to show how many items a tab holds.

<nav class="tabs" aria-label="Order">
  <ul>
    <li class="active">
      <a href="..." aria-current="page">
        <svg class="icon"><use xlink:href="/images/icons.svg#book"></use></svg>
        Products <span class="tag badge blue">12</span>
      </a>
    </li>
    ...
  </ul>
</nav>

A list item with the class title names the subject in front of the tabs. An empty list item with the class spacer takes up the room that is left, and pushes the tabs after it to the right.

<nav class="tabs" aria-label="Statistics">
  <ul>
    <li class="title"><span>Statistics</span></li>
    <li class="active"><a href="..." aria-current="page">Customers</a></li>
    <li><a href="...">Publishers</a></li>
    <li><a href="...">Orders</a></li>
    <li class="spacer"></li>
    <li><a href="...">Settings</a></li>
  </ul>
</nav>

Add small or large to make the tabs smaller or larger than the text around them.

<nav class="tabs small">...</nav>
<nav class="tabs">...</nav>
<nav class="tabs large">...</nav>

The active tab has the color of the surface behind it. Inside a container the tabs take over the colors of that container. On any other surface, set the custom property --nausikaa-tabs-background to the color of that surface.

<div class="container">
  <nav class="tabs">...</nav>
  ...
</div>

<!-- On a surface of your own -->
<nav class="tabs" style="--nausikaa-tabs-background: var(--nausikaa-mantle)">...</nav>