Preview

Press Ctrl + B (Cmd + B on macOS) to toggle the sidebar, or click the rail on its edge.

Installation

npx sigma-ui@latest add sidebar

Usage

<script setup lang="ts">
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarHeader,
  SidebarInset,
  SidebarProvider,
  SidebarTrigger,
} from '@/components/ui/sidebar';
</script>

<template>
  <SidebarProvider>
    <Sidebar>
      <SidebarHeader />
      <SidebarContent />
      <SidebarFooter />
    </Sidebar>
    <SidebarInset>
      <SidebarTrigger />
      <RouterView />
    </SidebarInset>
  </SidebarProvider>
</template>

Structure

A sidebar is made of these parts:

• SidebarProvider - holds the open state, persists it in a cookie, and handles the keyboard shortcut.
• Sidebar - the sidebar container. Renders a sheet on mobile.
• SidebarHeader and SidebarFooter - sticky top and bottom sections.
• SidebarContent - the scrollable body.
• SidebarGroup - a section inside SidebarContent, with SidebarGroupLabel, SidebarGroupAction, and SidebarGroupContent.
• SidebarMenu - a list of SidebarMenuItem components, each with a SidebarMenuButton and optional SidebarMenuAction, SidebarMenuBadge, and SidebarMenuSub.
• SidebarTrigger and SidebarRail - controls that toggle the sidebar.
• SidebarInset - the main content area next to the sidebar.

Notes

• useSidebar() returns state, open, setOpen, isMobile, openMobile, setOpenMobile, and toggleSidebar. Call it inside any component rendered within SidebarProvider.

• The desktop open state is saved in the sidebar_state cookie. Change the name with the cookie-name prop, or pass an empty string to disable it. In Nuxt, read the cookie with useCookie('sidebar_state') and pass it to default-open to avoid a layout shift on page load.

• Below the md breakpoint (48rem, 768px at the default font size) the sidebar renders as a sheet. collapsible="icon" shrinks it to icons only on desktop; pass tooltip to SidebarMenuButton to show labels on hover while collapsed.

• Override the width with the --sidebar-width and --sidebar-width-icon CSS variables on SidebarProvider.

Examples

Floating

Use variant="floating" to detach the sidebar from the edge of the screen with a border and shadow.

Inset

Use variant="inset" together with SidebarInset to place the main content in a raised card.

Menu actions and badges

SidebarMenuAction adds a secondary action to a menu item, SidebarMenuBadge shows a counter, and SidebarMenuSkeleton is a loading placeholder.

Controlled

Use v-model:open on SidebarProvider to control the sidebar from your own state.

API Reference

Sidebar

Props

Prop	Type	Default
side Side of the screen the sidebar is attached to.	"right" | "left"	"left"
variant Visual style. floating adds a border and shadow, inset places the main content in a card next to the sidebar (use with SidebarInset).	"inset" | "sidebar" | "floating"	"sidebar"
collapsible Collapse behavior on desktop. offcanvas slides the sidebar out, icon shrinks it to icons only, none keeps it always expanded.	"icon" | "offcanvas" | "none"	"offcanvas"

Slots

Slot	Scope
default Sidebar sections such as SidebarHeader, SidebarContent, SidebarFooter, and SidebarRail.	-

SidebarContent

Slots

Slot	Scope
default Scrollable sidebar body, usually one or more SidebarGroup components.	-

SidebarFooter

Slots

Slot	Scope
default Footer content, such as a user menu.	-

SidebarGroup

Slots

Slot	Scope
default Group parts: SidebarGroupLabel, SidebarGroupAction, and SidebarGroupContent.	-

SidebarGroupAction

Props

Prop	Type	Default
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"button"

Slots

Slot	Scope
default Action icon. Add a visually hidden label for screen readers.	-

SidebarGroupContent

Slots

Slot	Scope
default Group body, usually a SidebarMenu.	-

SidebarGroupLabel

Props

Prop	Type	Default
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default Label text, optionally with an icon.	-

SidebarHeader

Slots

Slot	Scope
default Header content, such as a team switcher or a search input.	-

SidebarInput

Props

Prop	Type	Default
modelValue Current value of the input; use with v-model.	string | number	-

Events

Event	Payload
update:modelValue Emitted when the user changes the value.	unknown[]

SidebarInset

Slots

Slot	Scope
default Main page content rendered next to the sidebar.	-

SidebarMenu

Slots

Slot	Scope
default List of SidebarMenuItem components.	-

SidebarMenuAction

Props

Prop	Type	Default
showOnHover Shows the action only while the menu item is hovered or focused.	boolean	false
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"button"

Slots

Slot	Scope
default Action icon. Add a visually hidden label for screen readers.	-

SidebarMenuBadge

Slots

Slot	Scope
default Badge content, such as a counter.	-

SidebarMenuButton

Props

Prop	Type	Default
tooltip Tooltip shown when the sidebar is collapsed to icons. Accepts a string or a component.	string | Component	-
variant Visual style of the button.	"default" | "outline" | null	"default"
size Height and text size of the button.	"default" | "sm" | "lg" | null	"default"
isActive Marks the button as the current page or section.	boolean	false
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"button"

Slots

Slot	Scope
default Button content, usually an icon followed by a <span> label.	-

SidebarMenuItem

Slots

Slot	Scope
default A SidebarMenuButton, plus an optional SidebarMenuAction, SidebarMenuBadge, or SidebarMenuSub.	-

SidebarMenuSkeleton

Props

Prop	Type	Default
showIcon Renders an icon placeholder before the text placeholder.	boolean	false

SidebarMenuSub

Slots

Slot	Scope
default List of SidebarMenuSubItem components.	-

SidebarMenuSubButton

Props

Prop	Type	Default
size Text size of the button.	"sm" | "md"	"md"
isActive Marks the button as the current page.	boolean	false
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"a"

Slots

Slot	Scope
default Button content, usually a <span> label.	-

SidebarMenuSubItem

Slots

Slot	Scope
default A SidebarMenuSubButton.	-

SidebarProvider

Props

Prop	Type	Default
defaultOpen Initial open state on desktop when open is not controlled. A previously persisted cookie value takes precedence.	boolean	true
open Controlled open state on desktop. Use with v-model:open.	boolean	-
cookieName Name of the cookie that persists the desktop open state between visits. Set to an empty string to disable persistence.	string	SIDEBAR_COOKIE_NAME
keyboardShortcut Key that toggles the sidebar together with Ctrl or Cmd. Set to an empty string to disable the shortcut.	string	SIDEBAR_KEYBOARD_SHORTCUT

Events

Event	Payload
update:open Emitted when the desktop open state changes.	[open: boolean]

Slots

Slot	Scope
default The sidebar and the main content of the layout.	{ open: boolean; state: SidebarState; isMobile: boolean; }

SidebarRail

Slots

Slot	Scope
default The content of the component.	-

SidebarSeparator

This component has no props, events, or slots.

SidebarTrigger

Slots

Slot	Scope
default Custom trigger icon. Defaults to a panel icon.	-

Accessibility

The sidebar is built from native buttons and links, so its menu items are reachable with the keyboard. On mobile it renders as a sheet that follows the Dialog WAI-ARIA design pattern. SidebarTrigger has a screen reader label, and SidebarRail is skipped in the tab order because the trigger and the shortcut cover it.

Keyboard Support

Button	Action
ctrl+b	Toggles the sidebar. Uses cmd+b on macOS.

Key	Description
Ctrl + B	Toggles the sidebar. Use Cmd + B on macOS. Change the key with the keyboard-shortcut prop on SidebarProvider.
Tab	Moves focus to the next menu button, action, or link.
Enter	Activates the focused menu button or link.
Esc	On mobile, closes the sidebar sheet.