sidebar light

lightweight sidebar navigation with nested items and active state highlighting.

examples

flat navigation

simple flat navigation with icons.

nested navigation

navigation with collapsible sections and nested items.

installation

bash

1npx shadcn@latest add https://ui.inference.sh/r/sidebar-light.json

usage

tsx

1import { SidebarLight, type NavItem } from '@/components/sidebar-light'2import { Home, Settings, Users } from 'lucide-react'34const navItems: NavItem[] = [5  { title: 'Home', href: '/', icon: Home },6  { title: 'Settings', href: '/settings', icon: Settings },7  {8    title: 'Users',9    href: '#',10    icon: Users,11    items: [12      { title: 'All Users', href: '/users' },13      { title: 'Add User', href: '/users/new' },14    ],15  },16]1718export function MySidebar() {19  return <SidebarLight items={navItems} />20}

props

prop	type	default
items	NavItem[]	-
className	string	-

NavItem

property	type	description
title	string	display text for the nav item
href	string	link destination
icon	ComponentType	optional icon component
items	NavItem[]	nested navigation items