SideNav

A sidebar shell with a pinned header, a pinned footer, and a scrollable body divided into titled groups. Group titles stick to the top of the scroll container as the user scrolls. The shell paints var(--rail-bg) as its background, so it follows the active theme automatically.

Demo

Scroll inside the panel to see group titles stick. Click a dataset to see the active state.

workspace

dream.lake

datasets

incoming312f

droid-202476.2k ep

ego4d-kitchen-subset9.6k ep

mujoco-unrolls4.5k ep

imagenet-1M1.3M f

imagenet-14M14.2M f

bindrs

imagenet

droid-2024

ego4d

mujoco-unrolls

q2-curated

success

failure

needs-review

uploads2 active

ge_coffee_demo_2026-11-20.tar

64 GB34%

widowx_pickplace_session_42.zip

62 GBprocessing

droid_session_2026-04-23.tar

4.2 GBdone

⌘K quick find

Props

SideNav

Prop	Type	Description
`header`	`ReactNode`	Pinned top area — logo, workspace label, collapse button, etc.
`footer`	`ReactNode`	Pinned bottom area — shortcuts, upload queue, account row, etc.
`children`	`ReactNode`	Scrollable content, typically `SideNavGroup` elements.
`className`	`string`	Extra classes on the root. Background defaults to `var(--rail-bg)`.

SideNavGroup

Prop	Type	Description
`title`	`string`	Group label — uppercase mono. Sticks to the top of the scroll container when scrolled past.
`action`	`ReactNode`	Node rendered to the right of the title — typically a small icon button.
`children`	`ReactNode`	Group content — fully up to the caller.
`className`	`string`	Extra classes on the group wrapper.

Opaque group headers — group headers stay opaque as rows scroll beneath them, so pinned titles never show the content passing underneath.