Tabs

Navigation links, not an ARIA tablist. The ARIA tabs pattern is a real widget - roving tabindex, arrow keys, Home and End, a script to switch panels - and shipped partially it is worse than nothing, because the roles promise keyboard behaviour that is not there. What most applications have is a set of URLs, which is navigation.

Reference

`sk-tabs, sk-tab`

Links in a <nav>, marked with aria-current="page". They work with scripting off, open in a new tab, and the back button behaves. Add hx-get and the panel swaps in place with none of that changing.

<nav class="sk-tabs" aria-label="Settings">
  <a class="sk-tab" href="/settings" aria-current="page">Profile</a>
  <a class="sk-tab" href="/settings/billing">Billing</a>
</nav>

Attribute	Type	Default	Notes
`aria-current`	`"page"`	-	Exactly one per strip. This is the whole state model - there is no .is-active.
`data-variant`	`"pill"`	`underline`
`data-fitted`	`"true"`	-	Equal widths, for two or three tabs filling a panel.
`aria-label`	`string`	`"Sections"`	On the nav. A page with two tab strips needs distinct labels.

Examples

Underline

The active tab takes the brand accent - the same gesture as the marker swash, a kiwi bar under the thing you are on.

Show markup

<nav class="sk-tabs" aria-label="Settings">
  <a class="sk-tab" href="#" aria-current="page">
    Profile
  </a>
  <a class="sk-tab" href="#">
    Billing
  </a>
  <a class="sk-tab" href="#">
    Members
  </a>
  <a class="sk-tab" href="#">
    Advanced
  </a>
</nav>

Pill

Show markup

<nav class="sk-tabs" aria-label="Settings" data-variant="pill">
  <a class="sk-tab" href="#">
    Profile
  </a>
  <a class="sk-tab" href="#" aria-current="page">
    Billing
  </a>
  <a class="sk-tab" href="#">
    Members
  </a>
  <a class="sk-tab" href="#">
    Advanced
  </a>
</nav>

Fitted

Show markup

<nav class="sk-tabs" aria-label="Period" data-fitted="true">
  <a class="sk-tab" href="#">
    Day
  </a>
  <a class="sk-tab" href="#">
    Week
  </a>
  <a class="sk-tab" href="#" aria-current="page">
    Month
  </a>
</nav>

With icons and counts

Show markup

<nav class="sk-tabs" aria-label="Workspace">
  <a class="sk-tab" href="#">
    <svg class="sk-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <circle cx="12" cy="12" r="9">
      </circle>
      <path d="M12 11v5">
      </path>
      <path d="M12 8h.01">
      </path>
    </svg>
    Profile
  </a>
  <a class="sk-tab" href="#">
    <svg class="sk-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path d="M12 5v14">
      </path>
      <path d="M5 12h14">
      </path>
    </svg>
    Billing
    <span class="sk-tab-badge">
      <span class="sk-badge" data-status="neutral" data-size="sm">
        3
      </span>
    </span>
  </a>
  <a class="sk-tab" href="#" aria-current="page">
    <svg class="sk-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path d="M20 6 9 17l-5-5">
      </path>
    </svg>
    Members
    <span class="sk-tab-badge">
      <span class="sk-badge" data-status="neutral" data-size="sm">
        12
      </span>
    </span>
  </a>
  <a class="sk-tab" href="#">
    <svg class="sk-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <circle cx="11" cy="11" r="7">
      </circle>
      <path d="m20 20-3.5-3.5">
      </path>
    </svg>
    Advanced
  </a>
</nav>