GitHub

Go to...

Choose a page to open.

Displays the navigation of an application in a panel at the side of the page.

Sidebar

sidebar-demo

Installation

pnpm dlx shadcn@latest add https://ui.n2020.com/r/sidebar.json

Usage

import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupLabel,
  SidebarInset,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar";
<SidebarProvider>
  <Sidebar>
    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>Project</SidebarGroupLabel>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton isActive>Services</SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarGroup>
    </SidebarContent>
  </Sidebar>
  <SidebarInset>
    <SidebarTrigger />
  </SidebarInset>
</SidebarProvider>

SidebarProvider fills the height of the viewport. The sidebar is fixed to the edge of the viewport and collapses off the canvas. On a narrow screen it opens in a sheet.

Set collapsible="icon" to collapse the sidebar to a column of icons. Set collapsible="none" to keep the sidebar in the page flow, as the preview on this page does.