SideNav

In the app

The left rail: sections, items with icons and counts, the active page on the fill, and a collapse toggle that leaves the icons.

@varick/ui/components/side-navAdded 2 Sept 2026

Content

Usage

import { SideNav } from "@varick/ui/components/side-nav";

export function Example() {
  return (
    <SideNav
      header={<Wordmark />}
      sections={[
        { items: [{ label: "Overview", icon: <TrendIcon />, href: "/" }] },
        { title: "Operate", items: [{ label: "Runs", icon: <RunIcon />, count: 342, href: "/runs", active: true }] },
      ]}
    />
  );
}

API reference

Every component also accepts className and the native props of its root element.

Prop	Type	Default	Description
sections	SideNavSection[]	required	title (optional) and items: label, icon, count, active, href or onSelect.
collapsed	boolean	uncontrolled	Controlled collapse, with onCollapsedChange. Collapsed is 64px, icons only.
header	ReactNode	undefined	Top of the rail, beside the collapse toggle.
footer	ReactNode	undefined	Pinned to the bottom. Usually the user.

Accessibility

<nav aria-label="Sidebar">; the active item has aria-current="page".
Items with href are links, the rest are buttons. Collapsed items keep their label as a title attribute.

Styles

The CSS as it appears in the app. The live component above is the same values as Tailwind classes.

.sidebar { width: 236px; border-right: 1px solid var(--hairline-soft); padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; background: #FFFFFF; }
.frame.collapsed .sidebar { width: 64px; }
.nav-section { padding: 10px 8px 4px; }
.nav-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border-radius: 4px; font-size: 13.5px; color: var(--fg-mid); }
.nav-item:hover { background: var(--fill); color: var(--fg-high); }
.nav-item[aria-current="page"] { background: var(--fill); color: var(--fg-high); }
.collapse-toggle { margin-left: auto; width: 24px; height: 24px; border-radius: 4px; color: var(--fg-low); }