Sidebar (Menú Lateral) | Design System Docs

Un componente estructurado para la navegación lateral en dashboards y aplicaciones complejas.

Ejemplo Básico

Contenido Principal

Aquí iría el contenido de tu aplicación.

Code Snippet

<div class="flex h-[400px] border rounded-md overflow-hidden relative">
  <SidebarComponent class="h-full w-48 relative border-r-0 border-r-border">
    <SidebarHeader>
      <h2 class="font-bold">Dashboard</h2>
    </SidebarHeader>
    <SidebarContent>
      <div class="px-2 space-y-1">
        <SidebarItem href="#" active={true}>Inicio</SidebarItem>
        <SidebarItem href="#">Analytics</SidebarItem>
        <SidebarItem href="#">Usuarios</SidebarItem>
        <SidebarItem href="#">Configuración</SidebarItem>
      </div>
    </SidebarContent>
    <SidebarFooter>
      <SidebarItem href="#">Cerrar sesión</SidebarItem>
    </SidebarFooter>
  </SidebarComponent>
  <div class="flex-1 p-6 bg-muted/20">
    Contenido principal...
  </div>
</div>