Skip to content

Sidebar

An app's main navigation. Persistent and collapsible to an icon rail from md up; a sheet on a phone.

Sourcecomponents/sidebar.tsx

Usage

Sidebar usage
import { FileText, Settings } from "lucide-react";import type { ReactNode } from "react";import { Sidebar, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider, SidebarTrigger } from "@/components/sidebar";
export function SidebarUsage({ pathname, children }: { pathname: string; children: ReactNode }) {  return (    <SidebarProvider>      <Sidebar>        <SidebarHeader>Acme</SidebarHeader>        <SidebarContent>          <SidebarGroup>            <SidebarGroupLabel>Workspace</SidebarGroupLabel>            <SidebarMenu>              <SidebarMenuItem>                <SidebarMenuButton href="/briefs" icon={<FileText />} isActive={pathname === "/briefs"}>                  Briefs                </SidebarMenuButton>              </SidebarMenuItem>              <SidebarMenuItem>                <SidebarMenuButton href="/settings" icon={<Settings />} isActive={pathname === "/settings"}>                  Settings                </SidebarMenuButton>              </SidebarMenuItem>            </SidebarMenu>          </SidebarGroup>        </SidebarContent>      </Sidebar>      <SidebarInset>        <header>          <SidebarTrigger />        </header>        {children}      </SidebarInset>    </SidebarProvider>  );}

When to use

Use when

An app's main navigation: persistent from md, a sheet below. Mark the current page with isActive. size="sm" on SidebarProvider for long, dense navs (docs, settings); rows stay 44px in the phone sheet. render={<NextLink href="…" />} on SidebarMenuButton routes with your framework

Don’t use when

Marketing sites; more than about a dozen top-level items (group them)