Navigation

7 components

Tabs are views of ONE thing. The moment a tab is a different subject it is a route. And the last breadcrumb takes no href — a crumb that links to the page you are already on is a dead control.

Tabs · the list is sticky, like a table header
`line` is the default: a 2px bar under the active tab, no enclosing tray. It pins under the app header when you scroll, because a reader who scrolls into a long panel should not have to remember which tab they are in.
default · the enclosed tray, only inside a card where a line would fight the edge
Product switcher · which tool you are in, at the top of the rail

Live, and reading this page’s own path. It belongs in the SIDEBAR and above the tool’s own rows, because that is the order of the question: which tool, then which screen inside it. Collapsed to icons the label and the chevron leave the flow and the tinted chip is all that is left — which is why the chip exists, and why this button passes no `tooltip` (see 05-sidebar-and-shell).

Scope selector · the one control allowed beside the crumb