SlowlyTabs
Switch between panels of content under a row of tabs.
Tabs let a visitor switch between panels of content in the same space, one showing at a time. They suit specifications, comparisons, and anything that splits cleanly into labelled sections.
A tab set is a few blocks working together: a Tab List of the clickable tabs, and a Tab Contents holding one Tab Content panel per tab. The tab a visitor clicks shows its matching panel.
Adding one
- Select the section or container to hold it.
- Open the inserter and search "tabs".
- Pick the Tab List block; Tab Contents and the first Tab and Tab Content are added alongside it automatically.
Add more tabs by duplicating a Tab block inside the Tab List, and its matching Tab Content inside the Tab Contents.
Settings
In the Tab List's own panel. Appearance lives in the shared design panel.
| Setting | What it does | Reach for it when |
|---|---|---|
| Active tab | Which tab opens by default, by position | The first tab is the right starting point for most layouts; a different number surfaces a specific panel on load |
| Trigger | Whether tabs switch on click or on hover | Hover suits dense comparison tables; click is the safer default for keyboard and touch users |
Styling
The Tab List, each Tab, the Tab Contents, and each Tab Content are separate blocks, so you style them separately in the shared design panel. The states panel is where you control how the active and hovered tab looks different from the rest.
Accessibility
- Write tab labels that say what is in the panel, so someone scanning with a screen reader can choose before switching.
- The tab row renders as a role="tablist" with each tab as a role="tab" and its panel as role="tabpanel"; keyboard navigation with arrow keys moves between tabs.
- Keep labels short and distinct; two tabs that start with the same word are harder to tell apart when read aloud.