Components

Tabs

Tabs allow users to navigate between related sections of content, with only one section visible at a time. This is an effective way to organize and present related content on the same page.

Overview Code Accessibility

We are working to improve the accessibility documentation for this component. If you have questions or see something that should be prioritised, please contact us on Github or Slack.

Tabs supports keyboard navigation with arrow keys
Each tab must have a unique title
When using icons, ensure they are decorative (aria-hidden) or have descriptive titles
If a tab panel does not contain any focusable elements, the panel itself receives focus

Tab moves focus to the next interactive element
→ moves to the next tab
← moves to the previous tab
Home moves to the first tab
End moves to the last tab
Enter or Space activates the selected tab

Edit this page on github.com (opens in a new tab)

Tabs

Keyboard navigation