Tabs
Tab interface examples using tab-set with native details/summary. Progressive enhancement with ARIA roles and keyboard navigation.
Overview
The tabs component uses the <tab-set> web component built on native HTML <details> and <summary> elements with the name attribute for exclusive behavior. Progressive enhancement: tabs work without JavaScript.
Key features:
- Progressive enhancement with native details/summary
- Horizontal and vertical orientations
- Support for icons and badges in tab labels
- ARIA tab roles for accessibility
- Keyboard navigation with arrow keys
Basic Tabs
A simple horizontal tab interface. The name attribute groups the details elements for exclusive behavior.
Basic tabs
<tab-set aria-label="Content tabs"> <details name="basic-tabs" open> <summary>Tab One</summary> <div> <p>Content for the first tab panel.</p> </div> </details> <details name="basic-tabs"> <summary>Tab Two</summary> <div> <p>Content for the second tab panel.</p> </div> </details> <details name="basic-tabs"> <summary>Tab Three</summary> <div> <p>Content for the third tab panel.</p> </div> </details></tab-set>Tabs with Icons
Add icons alongside tab labels for visual context. Use <icon-wc> inside the summary element.
Tabs with icons
<tab-set aria-label="Feature tabs"> <details name="icon-tabs" open> <summary> <icon-wc name="home" size="sm"></icon-wc> Home </summary> <div> <p>Main dashboard content goes here.</p> </div> </details> <details name="icon-tabs"> <summary> <icon-wc name="settings" size="sm"></icon-wc> Settings </summary> <div> <p>Configure your preferences.</p> </div> </details></tab-set>Vertical Tabs
Add data-orientation="vertical" for a sidebar-style tab layout.
Vertical tabs
<tab-set aria-label="Vertical tabs" data-orientation="vertical"> <details name="vertical-tabs" open> <summary>General</summary> <div> <p>General settings and preferences.</p> </div> </details> <details name="vertical-tabs"> <summary>Security</summary> <div> <p>Security and privacy options.</p> </div> </details> <details name="vertical-tabs"> <summary>Notifications</summary> <div> <p>Notification preferences.</p> </div> </details></tab-set>Configuration
The <tab-set> element accepts these attributes:
| Attribute | Values | Description |
|---|---|---|
aria-label |
String | Accessible label for the tab list. |
data-orientation |
horizontal vertical |
Tab layout direction. Default is horizontal. |
Details Element
Each tab panel uses a <details> element:
| Attribute | Values | Description |
|---|---|---|
name |
String | Groups details elements for exclusive behavior (required). |
open |
Boolean (presence) | Sets the initially selected tab. |
Usage Notes
- Name attribute: All details elements in a tab group must share the same
namevalue - Initial selection: Add
opento one details element to set the default tab - Accessibility: Always provide an
aria-labelon the tab-set element - Badges: Add
<span class="badge">inside summary for notification counts - Keyboard: Use arrow keys to navigate between tabs when focused
Related
Tabs WC
Web component documentation
Accordion
Accordion component