Tabs переключают связанные панели внутри одного контекста. Компонент поддерживает click, keyboard navigation и ARIA state через Tabs.init().
Overview keeps the primary status, totals, and next actions visible without leaving the current screen.
Activity contains the latest events, audit notes, and handoff messages for the same record.
Settings groups secondary options that affect this context but do not need full page navigation.
Use compact tabs in dense panels, settings pages, and narrow metadata blocks.
Disabled tabs can stay visible when a feature is unavailable for the current object.
Billing content is disabled in this example.
Vertical tabs work well when labels are longer or the panel needs a stable left rail.
Use them for account details, admin records, or focused configuration groups.
On smaller screens the tab rail becomes a horizontal scrollable list.
<div class="tabs" data-tabs>
<div class="tabs-list" aria-label="Project sections">
<button class="tab tab-active" type="button" aria-controls="panel-overview">Overview</button>
<button class="tab" type="button" aria-controls="panel-activity">Activity</button>
</div>
<div class="tabs-panels">
<div class="tab-panel tab-panel-active" id="panel-overview">Overview content</div>
<div class="tab-panel" id="panel-activity">Activity content</div>
</div>
</div>