Tabs

The server sends anchor links and sections with headings, which work as in-page navigation without JavaScript. On init the component promotes them to the ARIA tabs pattern and hides inactive panels; destroy restores the served HTML.

CSS: css/components/tabs.css. JS: @intervolutions/ivolt/tabs or auto.js.

Tabs and panelsfixtures/tabs/basic.htmlOpen alone

<div class="iv-tabs" data-iv-component="tabs" data-iv-activation="automatic">
  <div class="iv-tabs__list" aria-label="Plans">
    <a class="iv-tabs__tab" href="#p-monthly" id="t-monthly">Monthly</a>
    <a class="iv-tabs__tab" href="#p-yearly" id="t-yearly">Yearly</a>
    <a class="iv-tabs__tab" href="#p-enterprise" id="t-enterprise">Enterprise</a>
  </div>
  <section class="iv-tabs__panel" id="p-monthly">
    <h3 class="iv-tabs__heading">Monthly</h3>
    <p>29 € per seat and month. Every feature of the yearly plan, billed at the end of each period and cancellable at any time.</p>
  </section>
  <section class="iv-tabs__panel" id="p-yearly">
    <h3 class="iv-tabs__heading">Yearly</h3>
    <p>24 € per seat and month, billed once a year. Includes two additional sandbox environments and priority support during business hours.</p>
  </section>
  <section class="iv-tabs__panel" id="p-enterprise">
    <h3 class="iv-tabs__heading">Enterprise</h3>
    <p>Custom pricing with a signed service level agreement, single sign-on and a named technical contact. Talk to sales to get a quote.</p>
  </section>
</div>

// data-iv-component="tabs"
{
  activation: "automatic",
}

Options

Option	Attribute	Default	Effect
`activation`	`data-iv-activation`	`automatic`	`automatic` selects on arrow-key focus; `manual` waits for Enter or Space.
`orientation`	`data-iv-orientation`	`horizontal`	`vertical` uses Up/Down and the `iv-tabs--vertical` layout.

Methods and events

select(idOrElement), next(), prev(), activeTab, destroy(). iv:change (cancelable, detail.tab, panel, previousTab) then iv:changed.

Keyboard

Left/Right (or Up/Down when vertical) move between tabs with wrap-around, Home and End jump to the first and last; Tab moves into the panel.

Without JavaScript

All panels stay visible with their headings; the links scroll to each section. Essential content therefore never depends on the script.

Common mistakes

Putting role="tab" in the served HTML: without the script it announces a widget that does not work.
Tabs for sequential steps; use a form flow.

Every content component