Skip to main content

Tabs

Tabbed interface for organizing content into panels, with full keyboard navigation.

Example

Overview

Tabs organise content into separate views where only one view is visible at a time. Each tab activates its associated panel while hiding the others.

This component follows the WAI-ARIA Tabs pattern for full accessibility support.

<div class="l-ui-tabs" data-controller="l-ui--tabs">
  <div class="l-ui-tabs__list" role="tablist"
       data-action="keydown->l-ui--tabs#keydown">
    <button class="l-ui-tabs__tab l-ui-tabs__tab--active" role="tab"
            data-action="l-ui--tabs#select"
            data-l-ui--tabs-target="tab"
            aria-selected="true"
            aria-controls="panel-1" id="tab-1">
      Tab 1
    </button>
    <button class="l-ui-tabs__tab" role="tab"
            data-action="l-ui--tabs#select"
            data-l-ui--tabs-target="tab"
            aria-selected="false"
            aria-controls="panel-2" id="tab-2"
            tabindex="-1">
      Tab 2
    </button>
  </div>

  <div class="l-ui-tabs__panel" role="tabpanel"
       data-l-ui--tabs-target="panel"
       id="panel-1" aria-labelledby="tab-1">
    Content 1
  </div>
  <div class="l-ui-tabs__panel" role="tabpanel"
       data-l-ui--tabs-target="panel"
       id="panel-2" aria-labelledby="tab-2" hidden>
    Content 2
  </div>
</div>

CSS classes

Tab CSS classes
Class Description
l-ui-tabs__list Container for tab buttons (use with role="tablist")
l-ui-tabs__tab Inactive tab button
l-ui-tabs__tab--active Active tab button with underline indicator
l-ui-tabs__panel Tab panel content area