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.

Default

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

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>

API Reference

SidebarProvider

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.

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

Sidebar

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

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

SidebarMenuButton

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

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

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

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.

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.

Shimmer Skeleton