SidebarNav

A composable sidebar navigation with sections, active state and framework-agnostic link rendering.

Basic

SidebarNav renders a vertical nav from a sections array. Pass pathname to highlight the active item.

const sections = [
{
  label: 'Main',
  items: [
    { label: 'Dashboard', href: '/dashboard' },
    { label: 'Analytics', href: '/dashboard/analytics' },
  ],
},
{
  label: 'Settings',
  items: [
    { label: 'Settings', href: '/dashboard/settings' },
  ],
},
];

<SidebarNav sections={sections} pathname="/dashboard" />

With logo and title

Pass logo and title to render a branded header above the nav sections.

<SidebarNav
sections={sections}
pathname="/dashboard"
logo={<img src="/logo.svg" width={24} height={24} alt="" />}
title="My App"
titleHref="/"
/>

With Next.js Link

Pass linkComponent={Link} to enable client-side navigation. Any component that accepts an href prop works.

import Link from 'next/link';

<SidebarNav
sections={sections}
pathname={pathname}
linkComponent={Link}
title="My App"
/>

Collapsible sections

Set collapsible on a section to let users expand and collapse it. Use defaultCollapsed to start it closed.

const sections = [
{
  label: 'Main',
  items: [
    { label: 'Dashboard', href: '/dashboard' },
  ],
},
{
  label: 'Advanced',
  collapsible: true,
  defaultCollapsed: true,
  items: [
    { label: 'API keys', href: '/dashboard/api-keys' },
    { label: 'Webhooks', href: '/dashboard/webhooks' },
  ],
},
];

<SidebarNav sections={sections} pathname={pathname} />

Props

SidebarNav

Prop	Type	Default	Description
`sections`	`SidebarNavSection[]`	—	Array of section groups, each with a label and items
`pathname`	`string`	—	Current URL path used to highlight the active item
`title`	`string`	—	Brand name rendered in the sidebar header
`titleHref`	`string`	`'/'`	Link target for the logo/title area
`logo`	`ReactNode`	—	Logo element rendered before the title
`header`	`ReactNode`	—	Custom header content (e.g. a workspace switcher) — replaces logo/title when set
`density`	`'compact' \| 'comfortable'`	`'compact'`	Vertical rhythm passed to nav items
`linkComponent`	`ElementType`	`'a'`	Component used to render links — pass `Link` from Next.js for client-side routing
`className`	`string`	—	Additional Tailwind classes on the nav element

SidebarNavSection

Prop	Type	Default	Description
`label`	`string`	—	Section heading text
`items`	`SidebarNavItem[]`	—	Nav items belonging to this section
`collapsible`	`boolean`	—	Allows the section to be toggled open and closed
`defaultCollapsed`	`boolean`	—	When `collapsible` is true, starts the section collapsed

SidebarNavItem

Prop	Type	Default	Description
`label`	`string`	—	Display text for the nav item
`href`	`string`	—	Link destination, compared against `pathname` to determine active state