Sidebar

Persistent navigation

import {
  Sidebar,
  SidebarContent,
  SidebarInset,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar";
import { HomeIcon } from "lucide-react";

export function Example() {
  return (
    <SidebarProvider>
      <Sidebar collapsible="icon">
        <SidebarContent>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton isActive tooltip="Overview">
                <HomeIcon />
                <span>Overview</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarContent>
      </Sidebar>
      <SidebarInset><SidebarTrigger /></SidebarInset>
    </SidebarProvider>
  );
}

Installation

With the Siteplane registry alias configured, add the component and import the installed source from your app.

CLI

pnpm dlx shadcn@4.16.1 add @siteplane/sidebar

Import

import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInset,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar";

Need the machine-readable source metadata? View registry JSON.

Usage

Sidebar is persistent navigation. Use native menu items so collapse, tooltip, shortcut and mobile behavior stay intact.

import {
  Sidebar,
  SidebarContent,
  SidebarInset,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar";
import { HomeIcon } from "lucide-react";

export function Example() {
  return (
    <SidebarProvider>
      <Sidebar collapsible="icon">
        <SidebarContent>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton isActive tooltip="Overview">
                <HomeIcon />
                <span>Overview</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarContent>
      </Sidebar>
      <SidebarInset><SidebarTrigger /></SidebarInset>
    </SidebarProvider>
  );
}

Purpose

Sidebar demonstrates persistent, collapsible application navigation composed from the native Sidebar primitives. It collapses to an icon rail on desktop and becomes an off-canvas drawer on mobile.

API Reference

Compose the persistent layout with SidebarProvider, Sidebar and SidebarInset.
Use the native content, group and menu slots for navigation. Keep KPI and report cards in the main content region.
Render menu labels inside child elements such as <span> and provide tooltip when using collapsible="icon".
SidebarRail can opt into native resize behavior through resizable; do not add a second drag implementation.
Local menu-button sizes override the provider; inherited control size is intentionally damped for navigation density.

Motion

Desktop collapse animates the native Sidebar width and can be triggered through SidebarTrigger, the rail or Cmd/Ctrl+B.
Mobile off-canvas behavior, nested Collapsible navigation and Menu popups keep their native motion and reduced-motion support.
Do not add parallax or a content-wide backdrop layer.

Accessibility

Persistent navigation needs clear labels and an active state that is not conveyed by color alone.
Collapsed icon navigation must preserve labels through the native Sidebar tooltip contract.
Keep the native trigger, rail, keyboard shortcut and mobile dismissal behavior instead of replacing them with custom click targets.

Implementation Guidance

Keep Sidebar as persistent navigation, not a general card or embedded overlay.
Reuse native collapse, mobile drawer, tooltip and optional resize behavior.
Use Dashboard Shell when sidebar and app-header alignment are part of the requirement.

Registry

Source Contract

Registry item: sidebar

Files

src/components/ui/sidebar.tsx

Registry dependencies: @siteplane/base, @siteplane/button, @siteplane/input, @siteplane/scroll-area, @siteplane/separator, @siteplane/sheet, @siteplane/skeleton, @siteplane/tooltip

Package dependencies: @base-ui/react@1.5.0, class-variance-authority@0.7.1, lucide-react@1.18.0