Vertical Tabs
Tabs stacked in a sidebar column with panels rendered to the right. Built for settings, account, and documentation pages with many sections to navigate.
Tabs stacked in a sidebar column with panels rendered to the right. Built for settings, account, and documentation pages with many sections to navigate.
Search blocks by description or jump to a page.
Vertical Tabs arranges a stacked trigger list on the left and renders the active panel to its right. The trigger column holds three items (Account, Password, and Settings), each spanning the full column width with a solid background and a subtle shadow on the active item. The panel area sits in a bordered, padded box and shows a section heading with a short descriptive line beneath it. On narrow screens the column stacks above the panel so the layout stays usable at any viewport width.
Each trigger and panel is independent. You can rename the labels, add or remove sections, and rewrite the panel copy without touching the surrounding structure. The trigger list scales naturally as you add more items, and the panel area will hold any content you drop in, from short descriptive text to full forms.
Reach for this layout when a page has several distinct sections that a user navigates between without leaving the view. It fits settings screens, account dashboards, and configuration panels where the list of sections is long enough that horizontal tabs would feel crowded. On a real estate marketplace it works well for a property listing management page where an agent moves between their profile details, notification preferences, and billing settings without losing their place.
A natural flow around it on a Components page:
Before
After
The trigger column and panel area are fully replaceable, so you can adapt the block to many different content models:
Tip: keep the trigger labels short (one or two words each) so the sidebar column stays narrow and the panel area gets the most room.