Sidebar

Dois modos de uso: API composta (shadcn-style, máximo controle) e SidebarFromConfig (declarativo, zero boilerplate).

1. API composta (primitives)

Use os primitivos diretamente para controle total da estrutura e renderização.

Rota ativa: /dashboard

Conteúdo da página

2. SidebarFromConfig (config-driven)

Passe um array de grupos e receba uma sidebar completa. Ideal para apps com navegação definida em config ou CMS.

Rota ativa: /dashboardClique nos links da sidebar para navegar

3. Integração com Next.js Link

Passe linkComponent para usar qualquer componente de link do seu framework.

import Link from "next/link"
import { usePathname } from "next/navigation"

function NextLink({ href, className, children }) {
  return <Link href={href} className={className}>{children}</Link>
}

// No componente:
const pathname = usePathname()

<SidebarProvider>
  <SidebarFromConfig
    brand={{ title: "Meu App" }}
    groups={groups}
    activeHref={pathname}
    linkComponent={NextLink}
  />
</SidebarProvider>