# Sidebar > La navegación lateral de un panel: header, grupos, ítems con ícono y contador, footer y modo colapsado. ```tsx import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, … } from "sebs7n-ui/sidebar" ``` ## Ejemplos ### Completo El estado de colapsado lo guarda la app: acá vive en un `useState`, en una app real en una cookie. ```tsx import { Badge } from "sebs7n-ui/badge" import { DropdownMenuItem } from "sebs7n-ui/dropdown-menu" import { FileTextIcon, LogOutIcon, SettingsIcon, UsersIcon } from "lucide-react" import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarItem, SidebarItemBadge, SidebarSearch } from "sebs7n-ui/sidebar" import { Switch } from "sebs7n-ui/switch" import { UserMenu } from "sebs7n-ui/user-menu" import { useState } from "react" function Completo() { const [colapsado, setColapsado] = useState(false) return (
Acme Admin
Operación }> Facturas }> Clientes 3 Configuración }>Ajustes Cerrar sesión } user={{ name: "Ana Pérez", email: "ana@acme.com" }} />
) } ``` ## Props ### Sidebar Hereda las props de `