Pill nav, follow

Sections of one long page.

Get Pro to installPro18 blocksReact, Vue and Figma
MCPConnect the MCP server
Overview

The spring release: tokens, the navigation family and the docs rewrite.

Progress64%
DueFri 21 March
OwnerMorgan Philips
Messages
Ana: tokens are ready09:41
Ethan: pushed the sidebar fixes08:12
Noah: rail at 64px?Yesterday
Sarah: shared the fileMon
Schedule
Design reviewTue 10:00–11:30
Accessibility auditWed 14:00–16:00
Release candidateFri 21 March
Reports
Weekly adoption+12%
Open issues38
Bundle size41.2 kB

Exports run every Monday at 07:00.

More in Tab Menu#

Dashboard nav

App sidebars: a rail of destinations where one row is always the page you are on

Dashboard nav, spine

A rail that should stay quiet on any surface: no fill, just a line and a mark

Dashboard nav, ink

A rail that carries a head and a foot, on the dark ink surface

Underline nav

Section switching in a page header: the chosen one named in brand, the rest folded into More

Underline nav, elastic

A header nav that sits on the page with no card and may wrap

Underline nav, peek

A header nav whose sections have something to preview

Subtle nav

Quiet switching: labels only, where an icon would be noise

Subtle nav, capsule

Quiet switching in the look of the segmented control

Subtle nav, headline

A page whose nav should also name it

Icon nav

Switching where the glyph carries as much as the word

Icon nav, expand

A tight toolbar of sections where only the current one needs its name

Icon nav, stack

A phone bottom bar, or any five-section strip

Pill nav

Four or five sections of one page, switched from a header

Pill nav, follow

Sections of one long page

Pill nav, more

More sections than a row can hold

Sidebar with groups, and the icon rail

App navigation that has to fold away for room

Sidebar, flyout

A rail that opens panels instead of widening

Sidebar, folded

A sidebar with many groups that must never hide news

When to use#

  • An app with a small, stable set of destinations that does not change as the reader moves between them.
  • A fixed sidebar rail where every row wants a glyph and a label and the whole row should be the target.
  • A header row under a page title, where the chosen section should be named in brand ink rather than a weight change.
  • Switching where the labels are short and an icon would only add noise.

The whole set, with its codePro

Pro opens the Code tab on every block here, in React and Vue, plus the Figma file and the MCP server for your editor.