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
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.