Tab Menu Vertical
A column of tabs down the side of a panel, each with an icon, and a pill behind the selected one. For settings and account areas with more sections than a row can hold.
Preview
General
Workspace name, URL and default language.
Notifications
Choose what reaches your inbox and what stays in the app.
Security
Two-step sign-in, sessions and recovery codes.
Billing
Plan, invoices and the card on file.
Integrations
Connect the tools your team already uses.
When to use
- For five or more sections, or labels too long to sit side by side.
- For settings, profile and admin areas, where the list works as a local sidebar.
Reach for something else
- For two to four short views: that is a Tab Menu Horizontal.
- For moving between pages of a whole app: that is the app's sidebar navigation, built from links.
Anatomy
- 1
Tab list
A column beside the panel. On narrow screens it becomes a wrapping row above it.
- 2
Tab
A leading icon and a label in sentence case.
- 3
Selected pill
A soft green surface behind the selected tab, with its icon in brand ink.
- 4
Panel
The content, beside the list.
States
Default
Secondary text, icon in grey.
Hover
A soft grey wash.
Selected
The pill fills; text and icon take the brand colour.
Focus
A ring around the tab.
Accessibility
- Same roles as the horizontal menu, with aria-orientation="vertical" on the tab list.
- Up and Down move between tabs; Home and End jump to the ends.
- Icons are decorative and aria-hidden; the label names the tab.
Source
The Tab Menu Vertical 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