Sidebar

Installation

Install from the Vuzeno registry:

      Copy
      bunx --bun shadcn-vue@latest add https://vuzeno.com/r/sidebar.json
    

      Copy
      npx shadcn-vue@latest add https://vuzeno.com/r/sidebar.json
    

      Copy
      yarn dlx shadcn-vue@latest add https://vuzeno.com/r/sidebar.json
    

      Copy
      pnpm dlx shadcn-vue@latest add https://vuzeno.com/r/sidebar.json
    

Overview

The Sidebar is a composite layout component built on Ark UI primitives. It supports classic and inset variants, icon collapse with hover flyout submenus, responsive mobile drawer, multiple independent sidebars, and nested usage inside dialogs.

Composition

      Copy
      Sidebar.Provider
├── Sidebar.Root
│   ├── Sidebar.Header
│   ├── Sidebar.Content
│   │   └── Sidebar.Group
│   │       ├── Sidebar.GroupLabel
│   │       └── Sidebar.GroupContent
│   │           └── Sidebar.Menu
│   │               ├── Sidebar.MenuItem
│   │               │   └── Sidebar.MenuButton
│   │               └── Sidebar.MenuSub
│   │                   ├── Sidebar.MenuSubTrigger
│   │                   └── Sidebar.MenuSubContent
│   ├── Sidebar.Footer
│   └── Sidebar.Rail
└── Sidebar.Inset
    └── Sidebar.Trigger
    

Theming

Sidebar colors use the design system CSS variables:

• --sidebar, --sidebar-foreground
• --sidebar-primary, --sidebar-primary-foreground
• --sidebar-accent, --sidebar-accent-foreground
• --sidebar-border, --sidebar-ring

Layout variables are set per sidebar instance:

• --sidebar-width (default 16rem)
• --sidebar-width-icon (default 3rem)
• --sidebar-width-mobile (default 18rem on mobile drawer)

Use Tailwind utilities such as bg-sidebar, text-sidebar-foreground, and border-sidebar-border.

By default, Sidebar.Provider is container-relative (h-full min-h-0) and fits inside bounded layouts such as demo cards or dialogs. Pass full-height for page-level layouts that should fill the viewport (min-h-svh).

useSidebar

useSidebar(id?) returns a ComputedRef<SidebarInstanceContext | undefined>. Access the resolved sidebar with .value, or pass an id when multiple sidebars are registered.

Pass an id to useSidebar("left") when multiple sidebars are registered.

      Copy
      const sidebar = useSidebar();
sidebar.value?.toggleSidebar();
    

Examples

Inset variant

Visual variant where the main content is wrapped in a padded, rounded container.

Icon collapse with hover flyout

When collapsed to icon mode, submenus with children open a hover flyout menu instead of hiding nested items.

Multiple sidebars

Register left and right sidebars with independent state using the id prop and Sidebar.Trigger target.

Nested in a dialog

Sidebar.Provider is container-relative by default and fits inside dialogs or other bounded layouts. Pass full-height for page-level layouts.

Controlled

Control sidebar open state with v-model:open on Sidebar.Root.