Nav

Storybook

A compositional top bar: brand, page links, and a trailing slot

Nav lays out a brand, a ButtonGroup of page links, and trailing content such as a theme toggle. It has no mobile behaviour of its own. The collapsed bar and drawer below are this site's phone pattern, mocked up from ButtonGroup and ToggleSwitch, to show how the pieces compose at a narrow width.

Desktop

Full-width top navigation with brand, links, and trailing content

Mobile bar

Site pattern, not a Nav prop: the collapsed bar with brand and menu trigger
RiftRift

Hamburger menu

Site pattern, not a Nav prop: the drawer with top-level links, nested subnav, and theme toggle
tsx
// From the npm package
import { Nav } from 'rift-ds/components/Nav/Nav';

// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/nav.json