Tabs

Tabbed interface following the WAI-ARIA Tabs pattern.

Usage

{% include components/tabs.html
   id="settings"
   items=page.tab_items
   variant="default"
%}

Each item: { label, content, disabled }.

Example

View a summary of your account and recent activity.

Parameters

Parameter	Type	Default	Description
id	string	—	Required
items	array	—	Tab definitions
variant	string	default	default pills
class	string	—	Extra classes

Accessibility

• role="tablist", role="tab", role="tabpanel"
• Arrow keys, Home, and End move focus
• Only the active tab is in the tab order (tabindex="0")