El Sidebar es un contenedor de navegación persistente que organiza el acceso a las secciones principales de la plataforma. Ofrece una estructura clara, estable y fácilmente reconocible para que el usuario pueda orientarse dentro del dashboard.
Content area
Expanded · Collapsed
Importa los estilos base y el componente Sidebar.
1import 'nave-ui-library/styles.css'2import { Sidebar } from 'nave-ui-library/react'Prueba el estado collapsed. Los tokens de width y collapsedWidth dictan las dimensiones.
El sidebar utiliza transition-all con la duración definida en el token motion.duration.
Cada elemento visual está mapeado a una variable CSS específica para personalización total.
--sb-item-h--sb-item-radius--sb-item-gap--sb-item-size--sb-section-gap--sb-section-color--sb-toggle-color--sb-motionTodas las props disponibles para el componente Sidebar.
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Título principal que se muestra en el encabezado del sidebar. |
items | SidebarItem[] | — | Lista de objetos que definen los enlaces, iconos y etiquetas de navegación. |
collapsed | boolean | false | Controla si el sidebar se muestra en ancho completo o contraído (solo iconos). |
footer | React.ReactNode | — | Contenido opcional para la parte inferior del sidebar (ej: perfil de usuario o configuración). |
onToggle | (collapsed: boolean) => void | — | Callback ejecutado cuando se expande o contrae el sidebar manualmente. |
sections | SidebarSection[] | — | Arreglo de secciones con títulos y sub-items de navegación. |
onToggleCollapse | () => void | — | Callback ejecutado al clickear el ícono de colapso. |
1{2 "name": "Sidebar",3 "description": "Navegación lateral persistente o colapsable con soporte para secciones, encabezados y estados activos basados en tokens.",4 "component": "Sidebar",5 "files": [6 "components/base/navegation/_Sidebar.tsx"7 ],8 "dependencies": [9 "react"10 ],11 "props": {12 "title": {13 "type": "string",14 "description": "Título principal que se muestra en el encabezado del sidebar."15 },16 "items": {17 "type": "SidebarItem[]",18 "description": "Lista de objetos que definen los enlaces, iconos y etiquetas de navegación."19 },20 "collapsed": {21 "type": "boolean",22 "default": false,23 "description": "Controla si el sidebar se muestra en ancho completo o contraído (solo iconos)."24 },25 "footer": {26 "type": "React.ReactNode",27 "description": "Contenido opcional para la parte inferior del sidebar (ej: perfil de usuario o configuración)."28 },29 "onToggle": {30 "type": "(collapsed: boolean) => void",31 "description": "Callback ejecutado cuando se expande o contrae el sidebar manualmente."32 }33 }34}