Component

Sidebar

A vertical navigation panel with sections, items, and active state. Supports collapsed mode and role-based visibility. Uses the headless @refraction-ui/sidebar core.

Examples

Sidebar with grouped sections and active item highlighting.

Installation

$pnpm add @refraction-ui/react-sidebar

Usage

tsx

import { Sidebar } from '@refraction-ui/react-sidebar'

export function MyComponent() {
  return (
    <Sidebar
      sections={[
        {
          title: 'Navigation',
          items: [
            { label: 'Dashboard', href: '/dashboard' },
            { label: 'Settings', href: '/settings' },
          ],
        },
      ]}
      currentPath="/dashboard"
    />
  )
}

Props

Prop	Type	Default	Description
`sections`	`SidebarSection[]`	--	Array of sections with title and items.
`currentPath`	`string`	--	Current pathname for active item highlighting.
`collapsed`	`boolean`	`false`	Whether the sidebar is collapsed.
`userRoles`	`string[]`	--	User roles for visibility-based filtering.
`className`	`string`	--	Additional CSS classes.