Tabs

What it is

Page tabs that switch between sibling views. Slate 16px/600 labels, 48px tall. Current: navy text and a 3px navy underline. Never gold. The style hangs on aria-current or aria-selected.

When to use

• Sibling views of one subject, each at its own URL: the Profile and Articles tabs of a member profile.
• A view with a count: add .hs-tabs__count after the label (“Articles 12”).
• On the plate band of the member profile, on a light band or on a navy band.

When not to use

• To filter one list, use Filter chips and tags.
• To jump to sections of one page, use the Anchor nav.
• To move through the pages of a long list, use the Numbered pager.

Rules

• Markup: nav.hs-tabs with an aria-label, then ul.hs-tabs__list > li.hs-tabs__item > a.hs-tabs__tab. Each tab is a link to its own URL.
• Mark the current tab with aria-current="page". Use aria-selected="true" only inside a role="tablist". The style hangs on the attribute, not on a class.
• The current tab is navy text with a 3px navy underline. Never gold: gold is the colour of action.
• The colours follow the ground through the --hs-ctx-* properties. On .hs-band--navy the current count pill turns white with a navy number.

Accessibility

• The current state reaches the accessibility tree through aria-current or aria-selected.
• Contrast on white: labels slate 6.2:1, current navy 12.4:1. The current count pill is white on navy, 12.4:1.
• Each tab is a real link, so the tabs work without JavaScript.
• The row scrolls sideways on a narrow screen, never the page. Its padding leaves room for the 3px focus outline and its 3px offset.
• Transitions stop under prefers-reduced-motion: reduce.

Variants

On the plate

The colours follow the ground. Scrolls sideways on a phone.

<nav class="hs-tabs" aria-label="Member pages">
  <ul class="hs-tabs__list">
    <li class="hs-tabs__item"><a class="hs-tabs__tab" href="#settled" aria-current="page">Profile</a></li>
    <li class="hs-tabs__item"><a class="hs-tabs__tab" href="#settled">Articles <span class="hs-tabs__count">12</span></a></li>
  </ul>
</nav>