Tab Menu Vertical

A column of 36px tabs under an OR overline, as a 258px card or a bare list. Tabs come filled or with a left rail, in grey, light or brand, square or pill, with an optional skeuomorphic lift.

Workspace

Overview

Workspace nameOrvain

Members12

PlanStudio

RegionEU West

import { VerticalTabMenu } from '@orvain/react';
 
<VerticalTabMenu
  type="card"
  items={['Account', 'Security', 'Notifications', 'Billing']}
  value={tab}
  onValueChange={setTab}
/>

Add an Orvain Tab Menu Vertical card under an “OR” divider, grey fill style, with 2 tabs, each with an icon: • “Overview”, selected • “Members”

Orvain MCPIncluded with the library

When to use#

For settings pages and dashboards with many sections.
When labels are long, or sections need icons and counts.

When not to use

Use a Tab Menu Horizontal for two to six short, peer sections above the content.

Anatomy#

1Card

258 wide, 16px in, 8px between rows, radius 16, a hairline inside and a 1px drop; List drops all of it.

2Header

An OR overline: Medium 14, 0.21px tracking, uppercase, #8f8f8f.

3Tab

36 tall, 8px in, radius 8 (999 as a pill), a 20px glyph and a Medium 14 label; optional count, arrow and tooltip.

4Outline rail

Type Outline swaps the radius for a 1.5px left rail, 16px in on the left.

States#

Default

White, label #6d6d6d.

Hover

A 2% wash (#ebf2ff for Brand), label #2a2a2a; the rail darkens.

Active

Grey: a 6% wash. Light: white. Brand: #005cf8 with white text and a lift.

Fancy Style

Hover and Active take the skeuomorphic lift.

Source#

Preview – final code pending

The Tab Menu Vertical is available in the Figma library with every variant and state shown above. The React and Vue source, props table and install command will be added to this page when the code library is released.

Get notified when the source is published Get notified when the source is published

Used in these blocks

tab menu tabs