Sidebar

A composable, themeable and customizable sidebar component.

Installation

1

Install the component

Run the following command to add the Sidebar component to your project:
npx shadcn-vue@latest add sidebar
2

Import the components

Import the Sidebar components in your Vue file:
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
} from '@/components/ui/sidebar'

Usage

The Sidebar component is built using a composition pattern. You can use the individual components to build your sidebar.
Composition Pattern
The Sidebar uses a composition pattern where you combine smaller components to build your sidebar. This gives you full control over the structure and behavior.

Examples

Basic Sidebar

A simple sidebar with navigation items.
Basic Sidebar
Application
🏠 Home 📥 Inbox

Collapsible Sidebar

A sidebar that can be collapsed to save space.
<template>
  <SidebarProvider>
    <Sidebar collapsible="icon">
      <SidebarContent>
        <!-- Your sidebar content -->
      </SidebarContent>
    </Sidebar>
  </SidebarProvider>
</template>

Components

SidebarProvider

The root component that provides context for the sidebar. Wrap your entire layout with this component.

Sidebar

The main sidebar container. Supports collapsible behavior and theming.

SidebarContent

Container for sidebar content with proper scrolling behavior.

SidebarGroup

Groups related sidebar items together.

API Reference

Prop Type Default Description
collapsible "icon" | "offcanvas" | "none" "none" Defines the collapsible behavior
side "left" | "right" "left" Position of the sidebar
variant "sidebar" | "floating" | "inset" "sidebar" Visual variant of the sidebar