Tabs

Switches a panel in place. Seven files hand-roll this today. If it navigates to another page it is a sub-nav, not a tab.

Search results by type

World

Canada releases list of 36 countries whose citizens can apply

IRCC·yesterday

HTML

<div>
  <div class="p234-tabs" role="tablist" aria-label="Result type">
    <button class="p234-tabs__tab" role="tab" aria-selected="true" type="button">All <span class="p234-tabs__count">248</span></button>
    <button class="p234-tabs__tab" role="tab" aria-selected="false" type="button">Articles <span class="p234-tabs__count">221</span></button>
    <button class="p234-tabs__tab" role="tab" aria-selected="false" type="button">People <span class="p234-tabs__count">14</span></button>
    <button class="p234-tabs__tab" role="tab" aria-selected="false" type="button">Companies <span class="p234-tabs__count">9</span></button>
    <button class="p234-tabs__tab" role="tab" aria-selected="false" type="button">Seats <span class="p234-tabs__count">4</span></button>
  </div>
  <div class="p234-tabpanel" role="tabpanel">
    <a class="p234-story p234-story--compact" href="#">
      <span class="p234-kicker" data-section="world">World</span>
      <h3 class="p234-story__headline">Canada releases list of 36 countries whose citizens can apply</h3>
      <div class="p234-meta"><span>IRCC</span><span class="p234-meta__dot">&middot;</span><span>yesterday</span></div>
    </a>
  </div>
</div>

Tabs or sub-nav?

If pressing it changes a panel without leaving the page, it is a tab. If it goes to another URL, it is a sub-nav. They look similar on purpose and behave completely differently, and mixing them is why the current site has both patterns in the same row in places.

Show the counts

A count beside each label tells a reader whether a tab is worth pressing. An empty tab that looks full is a wasted tap, and on a phone that is most of the cost of using the page.

Rules

Use role="tablist", role="tab" and aria-selected. The underline is driven by the attribute, so the look and the state cannot drift.
Support arrow keys between tabs, and keep the panel reachable by Tab.
Put the selected tab in the URL where the choice is worth sharing or coming back to.
Let the row scroll sideways on a phone rather than wrap.

Do not hide important content behind a tab. Anything a reader needs on arrival goes in the first panel.
Do not use more than about six.
Do not nest tabs inside tabs.

Tokens this component reads

--p234-color-ink--p234-color-ink-muted--p234-color-ink-subtle--p234-color-rule--p234-color-brand--p234-type-ui-*--p234-space-4--p234-space-5--p234-space-6--p234-border-hairline--p234-border-thick