Sidebar

Full sidebar layout primitive — handles desktop/mobile collapse, off-canvas mode, icon-only mode, and a persistent rail for resizing. The UI Library itself uses this for its left nav.

Anatomy

Import all parts and piece them together.

vue

<script setup>
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInset,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarRail,
} from "@/components/ui/sidebar";
</script>

<template>
  <SidebarProvider>
    <Sidebar>
      <SidebarHeader />
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel />
          <SidebarGroupContent>
            <SidebarMenu>
              <SidebarMenuItem>
                <SidebarMenuButton />
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
      <SidebarFooter />
      <SidebarRail />
    </Sidebar>
    <SidebarInset />
  </SidebarProvider>
</template>

Default

Minimal layout: provider + Sidebar with nav + SidebarInset for the page content.

API Reference

Props, events, and slots for each sub-component.

SidebarProvider

Props

Prop	Type	Default	Description
defaultOpen	boolean	true	Initial open state on desktop.
open	boolean	—	Open state. Supports v-model:open.
style	object	—	Set CSS vars like --sidebar-width.

Events

Event	Description
update:open	Fires when the sidebar opens or collapses. Enables v-model:open.

Sidebar

Props

Prop	Type	Default	Description
side	"left" \| "right"	"left"	Edge the sidebar attaches to.
variant	"sidebar" \| "floating" \| "inset"	"sidebar"	Visual variant.
collapsible	"offcanvas" \| "icon" \| "none"	"offcanvas"	How the sidebar collapses on mobile.

SidebarTrigger / SidebarRail

Props

Prop	Type	Default	Description
class	string	—	Trigger is the toggle button; Rail is the draggable edge that also toggles on click.

SidebarMenuButton

Props

Prop	Type	Default	Description
isActive	boolean	false	Mark the current nav item.
tooltip	string \| Component	—	Shown when the sidebar is collapsed to icon mode.
variant	"default" \| "outline"	"default"	Visual style.
size	"default" \| "sm" \| "lg"	"default"	Button height.
asChild	boolean	false	Render into a child element such as NuxtLink.

SidebarMenu / SidebarMenuItem / SidebarMenuAction / SidebarMenuBadge

Props

Prop	Type	Default	Description
class	string	—	Menu is the list; Item is one row; Action is a trailing button; Badge shows a count.

SidebarMenuSub / SidebarMenuSubItem / SidebarMenuSubButton

Props

Prop	Type	Default	Description
isActive	boolean	false	(SubButton) Mark the active nested item. Sub renders the indented child list.

SidebarHeader / SidebarContent / SidebarFooter / SidebarGroup / SidebarGroupLabel / SidebarGroupContent / SidebarGroupAction / SidebarInset / SidebarSeparator / SidebarInput / SidebarMenuSkeleton

Props

Prop	Type	Default	Description
class	string	—	Structural wrappers for the sidebar regions. SidebarInset holds the page content beside the sidebar.

Accessibility

Keyboard shortcuts and ARIA behavior.

Keyboard

Shortcut	Description
`Tab`	Moves focus through the menu links and buttons.
`Shift`+`Tab`	Moves focus to the previous link or button.
`Enter`	Activates the focused SidebarMenuButton.
`Space`	Activates the focused SidebarMenuButton.

Ctrl/Cmd+B toggles the sidebar via the SIDEBAR_KEYBOARD_SHORTCUT global shortcut.
Supports collapsible offcanvas and icon modes; the SidebarTrigger carries an aria-label for its toggle action.

Sheet Skeleton