Introduction
The tabs component provides a keyboard-friendly tabbed interface with flexible styling options. You can choose between classic, pill, or generic tabs you can customize to fit your needs.
All focusable elements in tabs are included in the page tab sequence.
Tabs have keyboard support including Tab, left and right arrows, home, and end.
When focused, tab buttons expand the panel with space or enter keys.
When clicked, tab buttons toggle the appropriate aria-hidden and aria-expanded attributes.
Classic Tabs
To use the classic tab style, apply the .tabs-nav
class. You can add the optional modifier .tabs-nav--horizontal--{x}
to control the tab direction, where x is the breakpoint (e.g., md
for medium). This allows the tabs to switch from a vertical layout to a horizontal one based on the specified screen size, ensuring consistent appearance across devices.
Line # | Details |
---|---|
1 | The parent This selector uses JavaScript to group the tab buttons and panels with one another. |
3-30 | The child With the child Each list item requires a The The The |
32-42 | The child The The The |
Pill Tabs
For pill-style tabs, use the .tabs-nav--pill
modifier along with .tabs-nav
. This modifier gives tabs a rounded, pill-like appearance. As with the classic tabs, you can use the .tabs-nav--horizontal--{x}
modifier to control the tab layout at different screen sizes.
Generic Tabs
Create a tabbed interface without the .tabs-nav
selector. To do this, you need the .tabs
parent class and a button for each .tabs__panel
element. Each button should include the necessary attributes: aria-selected
, aria-controls
, and a unique id
. Be sure to add role="tab"
to each button for proper accessibility.
The example below replaces .tabs-nav
with generic navigation.