Sidebar

Use sidebar for application-level navigation — it handles collapsing to icons or off-canvas, a mobile sheet fallback, and persists open/closed state in a cookie. Wrap your whole layout in SidebarProvider so useSidebar() and the keyboard shortcut (Cmd/Ctrl+B) are available to every part of the sidebar.

<script setup lang="ts">
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar";
</script>

<template>
  <SidebarProvider>
    <Sidebar>
      <SidebarHeader>My App</SidebarHeader>
      <SidebarContent>
        <SidebarGroup>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton as-child>
                <a href="/dashboard">Dashboard</a>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroup>
      </SidebarContent>
    </Sidebar>
    <main>
      <SidebarTrigger />
      <slot />
    </main>
  </SidebarProvider>
</template>

Installing sidebar also installs button, input, separator, sheet, skeleton, and tooltip, which it composes for the trigger, search input, dividers, mobile drawer, loading rows, and collapsed-state labels respectively.

Installation

Usage