Tabs organise content across screens, data sets and interactions at the same level of hierarchy. A tab bar lets the user move between groups of related content without leaving the page. For content that must be read in order, use steps instead.
How to add a tab bar to a page. The files are components/css/tabs.css and components/js/tabs.js.
Link the shared files once per page. Never copy the rules into a page.
| Step | What to do |
|---|---|
| 1. Link | <link rel="stylesheet" href="/components/css/tabs.css"> and <script src="/components/js/tabs.js"></script> (the sliding line, for content tabs and link tabs). Both templates already have them. |
| 2. Choose | Content tabs switch panels on the same page: role="tablist" with button.tab. Navigation tabs go to another page: a nav.tab-bar with a.tab. |
| 3. Type and size | tab-bar--primary or tab-bar--secondary; Large is the default, add tab-bar--md or tab-bar--sm. |
| 4. Icons | The icon class ms (Material Symbols) comes from the page, as in the templates. |
| Class | Use |
|---|---|
tab-bar | The bar. Needs tab-bar--primary or tab-bar--secondary. |
tab-bar--md, tab-bar--sm | Medium and Small. Default is Large. |
tab-bar--on-grey | For grey surfaces. |
tab, tab--active, tab--icon-only | A tab. tab--active, aria-selected="true" and aria-current all give the active look. |
tab__icon, tab__label, tab__dot, tab__count | Parts of a tab. |
tab-panel | The content of a content tab. |
button (content tabs) or an a (navigation tabs). Never a div with a click handler.--tab-line-active on the bar for the accent colour. Never restyle .tab::after or .tab-bar__indicator.aria-label on a navigation bar on every page, so the line can slide across the page change.tab-bar--page navigates one page: a.tab links to #section-id, any number of sections. It is sticky; set --tab-sticky-top when a fixed header sits above it. data-tabs-hash="off" keeps the address from changing.nav.tab-bar.tab-bar--primary of a.tab, with --tab-line-active: var(--brand).The component is one CSS file and one script, shared by every page. Link them, never copy them.