Mesa Design System White Logo

Tabs allow users to navigate between related sections of content without leaving a page. Tabs contain at least two items, and one tab is active at a time.

Overview

Each tab should have a unique title that clearly describes the content.

Ensure that any content added to the tab panel is accessible (for example, be sure to include alt text for all images within a panel).

Keyboard Interactions

Mouse

Users can trigger a state change by clicking anywhere in the container area.

Keyboard

One tab should be selected by default. Users can navigate between tabs by pressing right or left arrow keys.