Lumina

Component · Navigation

Sidebar

Sidebar Lumina: collapsible, item-hierárquica, com badge e mood-aware. Padrão usado no portal, na própria doc, em todos produtos da casa.

Import

import { Sidebar, SidebarProvider, SidebarTrigger, SidebarInset, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarGroup, SidebarGroupLabel } from "@nimbuslab/lumina/components/sidebar"

Composição típica

TSX

Características

  • Colapsável (16 rem expandida, 3 rem ícone).
  • Border-right em 30% de opacidade da cor de border (não pesa).
  • Item ativo: bg-primary/[0.08] + font-medium em primary.
  • Group labels: 0.625rem, uppercase, tracking 0.08em, opacity 0.6.
  • Mobile: vira drawer pelo lado esquerdo.

Ver em uso

Toda esta documentação navega pela própria Sidebar do Lumina. A da esquerda agora mesmo. Inspecione o DOM pra ver.