NavigationDisponible

Sidebar

Navegación lateral componible con marca, secciones, estado activo y pie persistente.

Instalación

Agrega el componente y sus dependencias desde el registro que está ejecutándose en tu computadora.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/sidebar.json

Uso

Importa el componente en tu proyecto y conserva el código bajo tu control.

tsx

import {
  Sidebar,
  SidebarBrand,
  SidebarContent,
  SidebarSection,
  SidebarMenu,
  SidebarLink,
  SidebarBadge,
  SidebarFooter,
  SidebarItemLabel,
  SidebarToggle,
  SidebarTooltip,
} from "@/components/ui/sidebar"

Variantes

Opciones visuales incluidas en la API oficial del componente.

Estados e interacción

Aspecto, comportamiento y comprobación con teclado.

Comprueba reposo, hover, foco y selección/expansión. El enlace actual y el contenido abierto deben identificarse semánticamente.
No confundas pasar el cursor con seleccionar. Mantén el estado activo cuando el cursor se retire.
Prueba el ejemplo con Tab y Shift+Tab. El foco debe seguir visible en ambos temas.

Referencia API

Propiedades propias de BrutalLab. También acepta los atributos nativos correspondientes.

Prop	Tipo	Default	Descripción
collapsed	boolean	false	Controlled compact state on Sidebar and SidebarToggle. The parent owns sidebar width and persistence.
onCollapsedChange	(collapsed: boolean) => void	—	SidebarToggle callback; aria-expanded reflects the current state.
label	string / ReactNode	—	Localized accessible label on SidebarToggle; hover and keyboard-focus content on SidebarTooltip.
active	boolean	false	Añade aria-current y el tratamiento activo.
href	string	—	Destino semántico del enlace.

Accesibilidad

Reglas que deben conservarse cuando el componente se adapte a un producto.

SidebarMenu renderiza navegación semántica.

El enlace activo utiliza aria-current="page".

La navegación conserva etiquetas de texto junto a los iconos.