Navigation

Tabs

Switch between panels of content in the same place.

Basic

Your name and photo, as other people see them.

Change your password here. Use 12 characters or more.

Choose which emails we send you.

Billing is switched off in this demo.

HTML

<div class="pw-tabs" data-pw-tabs>
  <div class="pw-tablist" aria-label="Account">
    <button>Profile</button>
    <button>Password</button>
    <button>Notifications</button>
    <button disabled>Billing</button>
  </div>
  <div class="pw-tabpanel"><p>Your name and photo, as other people see them.</p></div>
  <div class="pw-tabpanel"><p>Change your password here. Use 12 characters or more.</p></div>
  <div class="pw-tabpanel"><p>Choose which emails we send you.</p></div>
  <div class="pw-tabpanel"><p>Billing is switched off in this demo.</p></div>
</div>

Pills

Add pw-tabs--pills. data-active picks the tab that is open at the start.

$12 per month, billed monthly.

$9 per month, billed once a year.

HTML

<div class="pw-tabs pw-tabs--pills" data-pw-tabs>
  <div class="pw-tablist" aria-label="Billing period">
    <button>Monthly</button>
    <button data-active>Yearly</button>
  </div>
  <div class="pw-tabpanel"><p><b>$12</b> per month, billed monthly.</p></div>
  <div class="pw-tabpanel"><p><b>$9</b> per month, billed once a year.</p></div>
</div>

Vertical

Add data-vertical. On narrow screens the tabs go back on top.

Workspace name, language and time zone.

Invite people and set what they may do.

Connect the other tools your team uses.

HTML

<div class="pw-tabs" data-pw-tabs data-vertical>
  <div class="pw-tablist" aria-label="Settings">
    <button>General</button>
    <button>Members</button>
    <button>Integrations</button>
  </div>
  <div class="pw-tabpanel"><p>Workspace name, language and time zone.</p></div>
  <div class="pw-tabpanel"><p>Invite people and set what they may do.</p></div>
  <div class="pw-tabpanel"><p>Connect the other tools your team uses.</p></div>
</div>

Options

Set them as attributes on the element.

Attribute	Default	What it does
`data-manual`		Arrow keys only move the focus. Enter or Space opens the tab. Use it when a panel is slow to show.
`data-vertical`		Tabs on the side, Up and Down keys.
`data-hash`		Puts the id of the open panel in the address, and opens that tab when the page loads with it.
`data-active`		On a tab: open at the start.

Classes

Class	What it does
`pw-tabs--pills`	Rounded switch instead of a line.

Events

Listen with addEventListener. Details are in event.detail.

Event	When
`pw:change`	With `index`, `tab` and `panel`. Call `preventDefault()` to stay on the current tab.

From your script

var t = Partwise.get(tabsElement, 'tabs');
t.select(2);          // by number, or by the selector of a panel
t.index;              // the open tab

Keyboard

Key	Action
`Right` `Left`	Next and previous tab (Down and Up when vertical)
`Home` `End`	First and last tab
`Tab`	Into the open panel

Good to know

Tabs and panels are matched by their order. The script adds the roles and ids.
Disabled tabs are skipped by the arrow keys.
When there are more tabs than fit, the row scrolls sideways.

Files

Everything is in dist/partwise.css and dist/partwise.js. To load only this component, use src/css/00-base.css and src/js/00-core.js plus: css/11-tabs.css, js/11-tabs.js.