ars-tabs

About

Accepts <ars-tab-panel> children. Provides ARIA tablist/tab/tabpanel roles, keyboard navigation (Arrow keys, Home, End), and 4 placement directions.

Basic Horizontal Tabs

Overview

This is the overview panel content. Tabs preserve DOM state when switching.

Details

Detailed information goes here. Content is hidden via display: none, not removed.

Settings

Configuration options panel.

<ars-tabs>
  <ars-tab-panel tab-id="overview" label="Overview">...</ars-tab-panel>
  <ars-tab-panel tab-id="details" label="Details">...</ars-tab-panel>
</ars-tabs>

Placement: Bottom

Bottom-aligned tab 1

Bottom-aligned tab 2

Placement: Start (Vertical)

Dashboard content

Analytics content

Reports content

Placement: End (Vertical, reversed)

End-placed tab A

End-placed tab B

Disabled Tab

This tab works.

Cannot access this.

This tab also works.

Keyboard Navigation

Focus a tab, then use:

Arrow Right/Down — next tab
Arrow Left/Up — previous tab
Home — first tab
End — last tab

Use arrow keys to navigate.

Second panel.

Third panel.

Dynamic Tabs

Dynamic content 1

Event Monitor

[ready] Listening for ars-tabs:change events...