SideNav

Persistent side navigation with sticky header/footer zones around a scrollable middle. Compose with SideNav.Heading, SideNav.Section, and SideNav.Item (link via href or button via onPress). Optional collapsible icon-only mode and resizable width.

Examples

Default

Brand in header, then a section of items.

import { SideNav } from '@var-ui/react';

<SideNav header={<SideNav.Heading heading="Acme" />}>
  <SideNav.Section title="Main">
    <SideNav.Item label="Dashboard" href="/" isSelected />
  </SideNav.Section>
</SideNav>

Sections

Group related destinations with multiple SideNav.Sections — each can take title, subtitle, and several SideNav.Items.

import { SideNav } from '@var-ui/react';

<SideNav header={<SideNav.Heading heading="Acme" subheading="Workspace" />}>
  <SideNav.Section title="Main">
    <SideNav.Item label="Dashboard" href="/" isSelected />
    <SideNav.Item label="Projects" href="/projects" />
  </SideNav.Section>
  <SideNav.Section title="Team" subtitle="Shared">
    <SideNav.Item label="Members" href="/members" />
    <SideNav.Item label="Billing" href="/billing" />
  </SideNav.Section>
</SideNav>

Props

Accessibility

The root is a nav landmark (label defaults to "Side navigation"). Selected items set aria-current="page". In collapsed icon-only mode, item labels surface via tooltips and the collapse control uses "Collapse navigation" / "Expand navigation". Nested collapsible items expose expand/collapse buttons and a role="group" submenu.