Tabs

Tab navigation styling for @bnotk/dsx, compatible with native button patterns and ARIA tablists.

Live Preview

Import

<link rel="stylesheet" href="@bnotk/dsx/css/tabs.css">

Or use the full bundle:

<link rel="stylesheet" href="@bnotk/dsx/css/index.css">

Classes

Class	Purpose
`.dsx-tabs`	Horizontal tab row
`.dsx-tabs__tab`	Individual tab button
`.dsx-tabs__tab--active`	Active tab helper class
`.dsx-tabs__panel`	Tab panel container
`.dsx-tabs--vertical`	Vertical tab layout

States and behavior

Tabs default to muted grey text.
:hover switches the text to var(--ds2-color-main).
Active tabs are styled either by [aria-selected="true"] or .dsx-tabs__tab--active and use a highlight border.
Disabled tabs use var(--ds2-color-grey-3) and cursor: not-allowed.
:focus-visible uses var(--ds2-shadow-focus).
Panels with [hidden] are not displayed.
Vertical tabs replace the bottom border indicator with a right border indicator.

Example

<div class="dsx-tabs" role="tablist" aria-label="Profile sections">
  <button class="dsx-tabs__tab dsx-tabs__tab--active" role="tab" aria-selected="true" aria-controls="panel-account" id="tab-account">
    Account
  </button>
  <button class="dsx-tabs__tab" role="tab" aria-selected="false" aria-controls="panel-security" id="tab-security">
    Security
  </button>
</div>

<section class="dsx-tabs__panel" role="tabpanel" id="panel-account" aria-labelledby="tab-account">
  Account details
</section>

Accessibility notes

Use role="tablist", role="tab", and role="tabpanel" for full ARIA tab behavior.
Keep aria-selected, aria-controls, and aria-labelledby in sync when JavaScript changes tabs.
Add keyboard support for Arrow keys, Home, and End in your behavior layer.
Do not hide critical content behind tabs without an accessible navigation path.