Tabs

Tabbed content navigation using ARIA tab pattern. Requires the nanoui-tabs Stimulus controller.

Example

General settings content goes here.

<div class="nano-tabs" data-controller="nanoui-tabs">
  <div role="tablist" class="nano-tabs__list">
    <button role="tab" id="tab-general"
            class="nano-tabs__trigger"
            aria-selected="true"
            aria-controls="panel-general"
            data-action="nanoui-tabs#select keydown->nanoui-tabs#navigate"
            data-nanoui-tabs-target="tab">
      General
    </button>
    <button role="tab" id="tab-security"
            class="nano-tabs__trigger"
            aria-selected="false"
            aria-controls="panel-security"
            tabindex="-1"
            data-action="nanoui-tabs#select keydown->nanoui-tabs#navigate"
            data-nanoui-tabs-target="tab">
      Security
    </button>
  </div>

  <div role="tabpanel" id="panel-general"
       class="nano-tabs__panel"
       aria-labelledby="tab-general"
       data-nanoui-tabs-target="panel">
    <p>General settings content.</p>
  </div>

  <div role="tabpanel" id="panel-security"
       class="nano-tabs__panel"
       aria-labelledby="tab-security"
       hidden
       data-nanoui-tabs-target="panel">
    <p>Security settings content.</p>
  </div>
</div>

Stimulus controller

Targets: tab (buttons), panel (content divs)
Values: hash (Boolean, default false — sync active tab with URL hash)
Actions: select(event), navigate(event)
Arrow key navigation (Left/Right/Home/End)
Full WAI-ARIA Tabs pattern