Sidebar

Navegación lateral colapsable. Se desliza fuera de pantalla con animación suave y una pestaña que permite re-expandirlo. API JSON: lista plana de items o agrupada por secciones. Submenús con Radix Collapsible. Estado persistido en localStorage.

pnpm dlx nuvo-ui add sidebar

Demo interactivo

Clic en «Usuarios» para el submenú. El chevron izquierdo colapsa el sidebar — desliza fuera de pantalla con una pestaña › para re-expandir.

Ruta activa: /

import { Sidebar } from "@/components/ui/sidebar"

// Flat list
const items = [
  { label: "Dashboard",  href: "/",      icon: HomeIcon },
  { label: "Analíticas", href: "/stats", icon: ChartIcon },
  {
    label: "Usuarios",
    href: "/users",
    icon: UsersIcon,
    badge: 3,               // badge en rojo
    children: [             // submenú colapsable
      { label: "Todos",        href: "/users" },
      { label: "Invitaciones", href: "/users/invites" },
    ],
  },
]

// O agrupado por secciones
const sections = [
  { section: "Principal", items: [{ label: "Dashboard", href: "/" }] },
  { section: "Gestión",   items: [{ label: "Usuarios",  href: "/users" }] },
]

// En Next.js:
const pathname = usePathname()
const router   = useRouter()

<Sidebar
  items={items}              // o sections={sections}
  activeHref={pathname}
  onNavigate={(href) => router.push(href)}
  logo={<MyLogo />}
  footer={<p>v1.0</p>}
  storageKey="mi-app-sidebar"
/>

Nota: El estado de colapso se persiste en localStorage con la clave que pases en storageKey. Cada instancia puede tener su propia clave.

Props — Sidebar

Prop	Tipo	Default	Descripción
items	SidebarItem[]	—	Lista plana de items de navegación
sections	SidebarSection[]	—	Items agrupados por sección con encabezado. Alternativo a items.
activeHref	string	—	Href activo — resalta el item correspondiente con barra lateral
onNavigate	(href: string) => void	—	Callback al hacer clic en un item (previene navegación nativa)
logo	ReactNode	—	Área del logo en el header del sidebar
footer	ReactNode	—	Contenido del pie, visible solo cuando está expandido
defaultCollapsed	boolean	false	Estado inicial de colapso
storageKey	string	"nuvo-ui-sidebar"	Clave de localStorage — cada instancia puede tener la suya
width	number	240	Ancho en px del sidebar cuando está expandido
className	string	—	Clases extra en el contenedor raíz

Tipo SidebarItem

Prop	Tipo	Default	Descripción
label	string	—	Texto del item
href	string	—	URL de destino
icon	ElementType	—	Ícono como componente React (recibe className)
badge	string \| number	—	Contador en badge primario
children	SidebarChildItem[]	—	Sub-items del menú colapsable (Radix Collapsible)