Vamo Design Navigation
16

Navigation

Rails, switchers, and slide-ins that hold context on every screen size.

The rail

Sidebar is the app chrome: Provider owns the collapse state, Header holds the ProjectSwitcher, Content stacks labeled groups of menu buttons, and the Trigger toggles the whole rail. Below the md breakpoint the same rail re-renders as a slide-in Sheet.

Search
Main content sits beside the rail. Collapse it with the trigger; below md the rail becomes a Sheet the trigger opens instead.
A live rail: ProjectSwitcher in the header, two menu groups, a footer, and the collapse trigger in the pane beside it.

Project switcher

Grouped accounts then projects, a checkmark on the current id, and an optional Create project action.

Current: founding-eng

ProjectSwitcher standalone: the same component the rail header composes.

Slide-in and mobile

Below the desktop breakpoint, navigation lives behind a trigger and slides in from the left as a Sheet with the same list. This book's own top bar on small screens is this pattern, live.

A Button trigger opens the nav list in a left Sheet.

Wayfinding

Where am I, and where can I go: Breadcrumb states the path, Tabs switch peer views, and LinkMenu holds the external profiles behind one trigger.

Breadcrumb: the path back up.
Tabs as peer-view navigation.
LinkMenu: brand lockups, real anchors.