Tab Menu
Dashboard nav
Best for
App sidebars — a fixed 240px rail of destinations
Anatomy
Icon and label on every row · the chosen row on a grey pill · rows fill the rail's width · a hairline above and below the set
Underline nav
Best for
Section switching in a page header — the chosen one named in brand
Anatomy
Brand ink on the chosen tab · an 8px bar sitting on the bottom rule · the bar scales between tabs rather than cutting · the row wraps before it clips
Subtle nav
Best for
Quiet switching — labels only, where an icon would be noise
Anatomy
No glyphs · the chosen label on a grey pill · 8px of padding round each label · the row wraps before it clips
Icon nav
Best for
Switching where the glyph carries as much as the word
Anatomy
A 20px glyph beside every label · the chosen tab on a grey pill · a hairline round the whole set rather than above and below · the row wraps before it clips
Be first in,
and 10% off.
Join the list and we’ll email you the moment the code library and MCP server go live — with a 10% discount code to use whenever you decide to buy.
One email when it ships. No spam, and you can unsubscribe anytime.Tab Menu
Dashboard nav
Best for
App sidebars — a fixed 240px rail of destinations
Anatomy
Icon and label on every row · the chosen row on a grey pill · rows fill the rail's width · a hairline above and below the set
Underline nav
Best for
Section switching in a page header — the chosen one named in brand
Anatomy
Brand ink on the chosen tab · an 8px bar sitting on the bottom rule · the bar scales between tabs rather than cutting · the row wraps before it clips
Subtle nav
Best for
Quiet switching — labels only, where an icon would be noise
Anatomy
No glyphs · the chosen label on a grey pill · 8px of padding round each label · the row wraps before it clips
Icon nav
Best for
Switching where the glyph carries as much as the word
Anatomy
A 20px glyph beside every label · the chosen tab on a grey pill · a hairline round the whole set rather than above and below · the row wraps before it clips
Be first in, and 10% off.
Join the list and we’ll email you the moment the code library and MCP server go live — with a 10% discount code to use whenever you decide to buy.
One email when it ships. No spam, and you can unsubscribe anytime.