1. Docs
2. Erste Schritte
3. Navigation & Tabs

Navigation & Tabs 1.2.0

The <velin-tabs> Web Komponente builds an accessible tabbed interface with roving tabindex, automatic ARIA wiring, and panel show/hide. English: Navs Tabs

Wann verwenden

• Switch between peer panels in the same view without leaving the Seite.
• You need Tastatur-first tabs with role="tablist" / tab / tabpanel.
• Prefer slotted tab / panel children over inventing a <velin-tab> element — that tag does not exist.

Wann nicht verwenden

• Do not use tabs for primary site navigation across Seiten — use Navigationsleiste or Bottom navigation.
• Do not use tabs for progressive disclosure of long content — prefer Accordion.
• Avoid packing unrelated workflows into one tab set; each panel should share the same Nutzer goal.

Einfache Tabs

Place tab triggers in slot="tab" and panels in slot="panel", matched by order. Mark the Standard with aria-selected="true" (otherwise the first tab is selected).

<velin-tabs>
  <button type="button" slot="tab" aria-selected="true">Home</button>
  <button type="button" slot="tab">Profile</button>
  <button type="button" slot="tab">Settings</button>
  <div slot="panel"><p>Home tab content.</p></div>
  <div slot="panel"><p>Profile tab content.</p></div>
  <div slot="panel"><p>Settings tab content.</p></div>
</velin-tabs>

Slots & ARIA

On connect, the Komponente sets role="tab" / role="tabpanel", generates ids when missing, and wires aria-controls / aria-labelledby. Inactive panels receive the verborgen attribute. You may also author with role="tab" / role="tabpanel" instead of slots — both selectors are supported.

CSS parts: tablist, panels.

Tastatur

The tab list uses roving tabindex via the shared Fokus manager: ← / → move and activate, Start / End jump to first/last.

Ereignisse

Barrierefreiheit

• Roles: tablist, tab, tabpanel with selected state via aria-selected.
• Only the selected tab is in the tab order (tabindex="0"); others use -1.
• verborgen panels leave the accessibility tree via the verborgen attribute.
• Vertragsstatus: bestanden.

Verwandt

• Navigationsleiste
• Segmented control
• Accordion
• A11y patterns