Navs & Tabs

The <velin-tabs> web component creates accessible tabbed interfaces with roving tabindex and animated panel transitions.

Basic tabs

Home tab content.

Profile tab content.

Settings tab content.

<velin-tabs>
  <velin-tab label="Home" active>
    <p>Home tab content.</p>
  </velin-tab>
  <velin-tab label="Profile">
    <p>Profile tab content.</p>
  </velin-tab>
  <velin-tab label="Settings">
    <p>Settings tab content.</p>
  </velin-tab>
</velin-tabs>

Tab panels

Each <velin-tab> automatically gets role="tabpanel", linked to its corresponding tab via aria-labelledby. Content is lazy-rendered by default.

<velin-tabs>
  <velin-tab label="Overview" active>
    <h3>Overview</h3>
    <p>Panel content rendered when tab becomes active.</p>
  </velin-tab>
  <velin-tab label="Details" disabled>
    <p>This tab is disabled.</p>
  </velin-tab>
</velin-tabs>

Roving tabindex

The tab list uses roving tabindex: ← / → moves focus between tabs, Home / End jumps to first/last, and Enter or Space activates the focused tab.

<!-- Roving tabindex is automatic. No extra attributes needed.
     Keyboard bindings:
       ← / →     Move focus between tabs
       Home       Focus first tab
       End        Focus last tab
       Enter/Space  Activate focused tab
-->
<velin-tabs>
  <velin-tab label="Tab 1" active>Content 1</velin-tab>
  <velin-tab label="Tab 2">Content 2</velin-tab>
  <velin-tab label="Tab 3">Content 3</velin-tab>
</velin-tabs>

CSS variables

velin-tabs {
  --velin-tabs-border-color: var(--velin-border-color);
  --velin-tabs-active-color: var(--velin-primary);
  --velin-tabs-indicator-height: 2px;
  --velin-tabs-gap: .25rem;
  --velin-tabs-padding: .75rem 1rem;
}