Tabs

Tab interface examples using tabs-wc with native details/summary. Progressive enhancement with ARIA roles and keyboard navigation.

Overview

The tabs component uses the <tabs-wc> 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.

 <tabs-wc 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> </tabs-wc>

Tabs with Icons

Add icons alongside tab labels for visual context. Use <icon-wc> inside the summary element.

 <tabs-wc 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> </tabs-wc>

Vertical Tabs

Add data-orientation="vertical" for a sidebar-style tab layout.

 <tabs-wc 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> </tabs-wc>

Configuration

The <tabs-wc> 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 name value
  • Initial selection: Add open to one details element to set the default tab
  • Accessibility: Always provide an aria-label on the tabs-wc 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