Tab Menu Horizontal
A row of tabs above a panel, with an underline that slides to the selected tab. It splits one area into peer views without leaving the page.
Preview
Overview
A summary of the project: owners, status and the last five changes.
Activity
Twelve new events since you last looked, newest first.
Members
Four people have access. Invite more from here.
Settings
Name, visibility and the danger zone.
When to use
- For two to seven sections of the same thing: Overview, Activity, Settings.
- When each tab holds enough content to deserve its own view.
- With a count beside a label, when the number helps people choose: Open 12, Closed 48.
Reach for something else
- For many sections or a settings area with nested groups: that is a Tab Menu Vertical.
- For a compact mode switch that filters one list: that is a Segmented Control.
Anatomy
- 1
Tab list
A row with a hairline along the bottom. It wraps rather than scrolling off the edge.
- 2
Tab
A label, optionally with a leading icon and a trailing count.
- 3
Indicator
A 2px line under the selected tab, in brand ink. It slides between tabs.
- 4
Count
Optional small pill with a number.
- 5
Panel
The content of the selected tab, below the list.
States
Default
Unselected tabs in secondary text.
Selected
Primary text with the indicator underneath.
Hover
The label darkens.
Focus
A ring around the tab.
Disabled
Muted, skipped by the arrow keys.
Accessibility
- The row is role="tablist"; each tab is role="tab" with aria-selected and aria-controls; the content is role="tabpanel" labelled by its tab.
- Only the selected tab is in the tab order. Left and Right move between tabs, Home and End jump to the ends.
- A count is part of the tab's name, so it is read with the label.
Source
The Tab Menu Horizontal is in the Figma library today, with every variant and state above. Its React and Vue source ships with the code library, free, and this page gets the install line, the props and the code the day it does.
See it in a block