The tabs component provides a keyboard-friendly tabbed interface with flexible styling options.
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.
.tabs-nav selector (Figure 1, Line 3) offers out-of-the-box styling for tab buttons.
With the child
Each list item requires a
In Figure 1, refer to line 3. The
.tabs-nav--horizontal modifier accepts chained breakpoint modifiers.
With the styled tabs example (above), tab buttons start vertical. They then change to horizontal at the medium breakpoint.
Create a tabbed interface without the
.tabs-nav selector (above). You need is the
.tabs parent class, and button for each
.tabs__panel selector. Buttons require the same attributes from the styled tabs example. An
aria-controls, and a unique
id. Be sure to include
role="tab" on the buttons for accessibility.
The example below replaces
.tabs-nav with generic navigation.