@aelig/sidebar-builder

Sidebar Builder

Add

pnpm dlx shadcn@latest add @aelig/sidebar-builder

Builds a collapsible application sidebar from nested navigation items.

Preview

Usage

"use client"

import {
  SidebarInset,
  SidebarProvider,
} from "@/components/ui/sidebar"
import { SidebarBuilder } from "@/components/ui/sidebar-builder"

const navigationItems = [
  {
    title: "Main",
    items: [
      { label: "Dashboard", path: "/dashboard", iconName: "layout-dashboard" },
      { label: "Settings", path: "/settings", iconName: "settings" },
    ],
  },
]

export function AppFrame({ children }: { children: React.ReactNode }) {
  return (
    <SidebarProvider>
      <SidebarBuilder companyName="AELIG" navigationItems={navigationItems} />
      <SidebarInset>{children}</SidebarInset>
    </SidebarProvider>
  )
}

Variants and options

navigation groups

Group links with optional section titles.

nested children

Render nested navigation trees through item children.

footer content

Pass children to render custom sidebar footer content.