Tab Menu Horizontal

A 48px strip of tabs between two hairlines. The active tab turns blue and a 2px bar lands on the strip's bottom edge; an optional compact button at the end opens every tab as a menu.

Orvain websiteMarketing site · updated 2h ago

Homepage heroLive

Pricing tableIn review

Docs searchDraft

import { HorizontalTabMenu } from '@orvain/react';
 
<HorizontalTabMenu
  items={['Overview', 'Activity', { label: 'Alerts', count: 3 }, { label: 'Billing', disabled: true }]}
  value={tab}
  onValueChange={setTab}
/>

Add an Orvain Tab Menu Horizontal row with 4 tabs: • “Overview”, selected • “Activity” • “Settings” • “Members”

Orvain MCPIncluded with the library

When to use#

To switch between peer views of the same object: Overview, Activity, Settings.
When there are two to six sections and their labels are short.

When not to use

Use a Segmented Control for a compact switch inside a card.
Use a Tab Menu Vertical when there are many sections or long labels.

Anatomy#

1Strip

558 wide, 14px above and below the tabs, 12px between them, #f2f2f2 hairlines top and bottom.

2Tab

8px in, Satoshi Medium 14, with an optional 20px glyph, a count badge and a trailing chevron.

3Active bar

2px of #005cf8 under the whole tab, over the bottom hairline; the Thick weight is 8px with rounded top corners.

4Compact button

A 24px round button at the end that lists every tab.

States#

Default

Label #6d6d6d.

Hover

Label #2a2a2a.

Active

Label #005cf8 and the bar.

Weight

Default (2px) or Thick (8px) bar.

Source#

Preview – final code pending

The Tab Menu Horizontal 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