Tabs

Tabs allows you to navigate between multiple documents in a single window. Instead of a single title bar, a tabbed window may include multiple tabs along the top. Clicking one of the tabs will display the contents of the corresponding document.

Standard Tabs

View Demo
Design
HTML

CSS Classes:

1. .tabs

  • The parent element which wraps the tab navigation.

2. .tab

  • The individual clickable tabs. The active tab will have the .is-active state class.
  • Must be assigned to li, the child a.tab-title should have the [href] set to the ID of the tab's content.

3. .tabs-contents

  • The parent element which wraps the tab component's contents.

4. .tab-content

  • The individual panel which corresponds to each tab.
  • This should contain .is-active, and an ID for the tab to link to.

 JS

Headings can be set via the heading attribute or the tab-heading element in side the tab.

active sets the currently active tab.

select allows for an optional expression to be called when the tab is selected.

Accessibility

  • The ul.tabs should contain the role="tablist"
  • The a.tab-title should contain the role="tab", and be wrapped in a li.tab with the role="presentation". It should also have an aria-controls attribute which is the id of its tabpanel.
  • If a tab is selected, the role="tab" should have aria-selected="true" and tabindex="0", otherwise it should be aria-selected="false" with tabindex="-1".
  • Each div.tab-content should have role="tabpanel", and should have an aria-labelledby attribute which is the id of its corresponding role="tab".