Sidebar Navigation

Enhanced sidebar navigation with search, filtering, sorting, and grouping capabilities.

Default Sidebar

Basic sidebar with icons and badges.

Snippet

import { SidebarNav } from '@creo-team/buzz-ui/client'
import { Home, Users, Settings } from 'lucide-react'

const items = [
  { key: 'home', label: 'Home', href: '/home', icon: <Home className="h-4 w-4" /> },
  { key: 'users', label: 'Users', href: '/users', icon: <Users className="h-4 w-4" /> },
  { key: 'settings', label: 'Settings', href: '/settings', icon: <Settings className="h-4 w-4" />, badge: 'New' },
]

<SidebarNav
  items={items}
  title="Navigation"
/>

With Search & Alphabetical Sort

Enable search filtering and alphabetical sorting for easier navigation.

Snippet

<SidebarNav
  items={items}
  title="Navigation"
  sortAlphabetically={true}
  showSearch={true}
/>

Grouped Navigation

Group items by category using a custom grouping function.

Snippet

const groupByCategory = (item) => {
  if (['overview', 'analytics'].includes(item.key)) return 'Dashboard'
  if (['team', 'roles'].includes(item.key)) return 'Team'
  return 'Settings'
}

<SidebarNav
  items={items}
  title="Grouped Navigation"
  groupBy={groupByCategory}
  showSearch={true}
/>

Variants

Compact

Default

Spacious

API Reference

Prop	Type	Default	Description
`items`	SidebarNavItem[]	required	Array of navigation items
`title`	string	"Navigation"	Title displayed at the top
`sortAlphabetically`	boolean	false	Sort items alphabetically
`showSearch`	boolean	true	Show search/filter input
`groupBy`	(item) => string	undefined	Function to group items
`variant`	'compact' \| 'default' \| 'spacious'	'default'	Size variant
`stickyHeader`	boolean	true	Sticky title and search
`scrollable`	boolean	false	Enable scrolling within the sidebar

Item Structure

Snippet

interface SidebarNavItem {
  key: string           // Unique identifier
  label: string         // Display text
  href: string          // Link destination
  description?: string  // Optional description (shown in spacious variant)
  badge?: string        // Optional badge text
  icon?: ReactNode      // Optional icon component
}