Components

Sidebar

Composable primitives for an application navigation sidebar.

Usage

With @flagon-io/ui installed (see Installation), import it directly.

import {
  SidebarProvider, Sidebar, SidebarHeader, SidebarContent,
  SidebarGroup, SidebarGroupLabel, SidebarGroupContent,
  SidebarMenu, SidebarMenuItem, SidebarMenuButton,
  SidebarInset, SidebarTrigger,
} from "@flagon-io/ui";

<SidebarProvider>
  <Sidebar collapsible="icon">
    <SidebarContent>
      <SidebarMenu>
        <SidebarMenuItem>
          <SidebarMenuButton asChild isActive tooltip="Dashboard">
            <a href="/"><LayoutDashboard /><span>Dashboard</span></a>
          </SidebarMenuButton>
        </SidebarMenuItem>
      </SidebarMenu>
    </SidebarContent>
  </Sidebar>
  <SidebarInset>
    <SidebarTrigger />
    {/* your page */}
  </SidebarInset>
</SidebarProvider>

Prefer to own the code?

You don’t have to install the package - you can copy this component into your project with the shadcn CLI and edit it freely.

npx shadcn@latest add https://ui.flagon.io/r/sidebar.json