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.
- The parent element which wraps the tab navigation.
- The individual clickable tabs. The active tab will have the
- Must be assigned to
li, the child
a.tab-titleshould have the
[href]set to the ID of the tab's content.
- The parent element which wraps the tab component's contents.
- The individual panel which corresponds to each tab.
- This should contain
.is-active, and an ID for the tab to link to.
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.
ul.tabsshould contain the
a.tab-titleshould contain the
role="tab", and be wrapped in a
role="presentation". It should also have an
aria-controlsattribute which is the id of its tabpanel.
If a tab is selected, the
tabindex="0", otherwise it should be
role="tabpanel", and should have an
aria-labelledbyattribute which is the id of its corresponding