Tabs

Tabs organize content across different screens, data sets, and other interactions.

What is the recipe for successful achievement? To my mind there are just four essential ingredients: Choose a career you love, give it the best there is in you, seize your opportunities, and be a member of the team.

Variations

Basic Tabs Requires JS

copydone
copydone
copydone

Basic Tabs Full Width Requires JS

copydone
copydone
copydone

Basic Tabs With Leading Icon Requires JS

What is the recipe for successful achievement? To my mind there are just four essential ingredients: Choose a career you love, give it the best there is in you, seize your opportunities, and be a member of the team.

copydone
copydone
copydone

Pill Tabs Requires JS

copydone
copydone
copydone

Pill Tabs With Leading Icon Requires JS

copydone
copydone
copydone

Usage

Use tabs to organize and allow navigation between groups of content that are related and at the same level of hierarchy.

Specs

Tabs consist of the following main components:

  • Section: a section that wraps both the tabs (buttons) and the tab panels that hosts the tab contents.
  • Tabs: a list that contains buttons and serves as a label for one of the tab panels and can be activated to display that panel.
  • Tab panels: a set of divs that contains the content associated with a tab.

Tabs come in 2 styles (base and pill tabs) and they can contain text and an icon that is only visible on big screens.

  • Small: 2em height (32px), 1rem (16px) horizontal padding and 0.75rem (12px) font size. Icons on small tabs are 1rem (16px) wide and tall and have a 0.5rem (8px) distance from the text.
  • Base: 2.5em height (40px), 1.25rem (20px) horizontal padding and 0.875rem (14px) font size. Icons on base tabs are 1.25rem (20px) wide and tall and have a 0.5rem (8px) distance from the text.
  • Large: 3em height (48px), 1.5rem (24px) horizontal padding and 0.875rem (14px) font size. Icons on large tabs are 1.25rem (20px) wide and tall and have a 0.5rem (8px) distance from the text.

Accessibility notes

Tabs are wrapped in a <section aria-multiselectable="false"> attribute that indicates that the user may not select more than one item from the current selectable descendants.

A <ul role="tablist"> element wraps the tab button list.

Each tab button has the following aria labels:

  • aria-setsize: indicates the total available number of tabs.
  • aria-posinset: indicates the index of each tab within the set of tabs.
  • aria-controls: points to the id of the tabpanel that the tab controls (and makes visible).
  • aria-selected: set to true for the active tab.

Each tab panel has the following aria labels:

  • aria-hidden: set to false for the active tab panel and false to all others.
  • aria-labelledby points to the id of the tab button that controls this panel.

Check out the latest release!