Sidebar

Persistent app-shell rail with collapse, inset, and a mobile drawer.

Introduction

Sidebar is a persistent app-shell rail. Mount SidebarProvider around Sidebar and SidebarInset as siblings. Put SidebarList or Accordion in the rail. Below the md breakpoint the panel opens as a Drawer.

Mount SidebarProvider around the shell before using SidebarTrigger or useSidebar. BridgeUIProvider still holds theme, tokens, and defaultProps. It does not own instance open state.

Playgrounds sit in a bounded frame so the fixed rail stays in the preview. In an app, mount SidebarProvider at the shell root — it defaults to min-h-svh.

Use the framework selector in the site header to switch between React and Vue.

Import

import {
  Sidebar,
  SidebarInset,
  SidebarList,
  SidebarListItem,
  SidebarProvider,
  SidebarTrigger,
  useSidebar,
} from "@bridge-ui/vue/Components/Sidebar";

import {
  Sidebar,
  SidebarInset,
  SidebarList,
  SidebarListItem,
  SidebarProvider,
  SidebarTrigger,
  useSidebar,
} from "@bridge-ui/react/Components/Sidebar";

Basic usage

Compose the shell: provider, rail, inset, and trigger. SidebarList / SidebarListItem bind nav chrome to the nearest rail.

Header and footer

Put brand and account rows in the header and footer slots. SidebarList collapses those rows to the start avatar. The end chevron hides while collapsed. Give nav items a start icon so they stay visible on the icon rail. Header and footer lists use classes.root "p-0" because those slots are already padded.

Icon collapse

Set collapsible="icon" and use SidebarList / SidebarListItem. Collapsed items keep string primary as an aria-label and show it in a Tooltip on the whole item. Nested SidebarList and ListSection labels are hidden. The mobile drawer keeps labels.

Controlled

Control desktop expanded state on SidebarProvider. There is no cookie or localStorage — persist open in the app if you need it. There is no default keyboard shortcut; call toggleSidebar from useSidebar.

Right side

Set side to right to dock the rail to the opposite edge. Collapsed item tooltips open on the side opposite the rail.

Inset variant

variant="inset" pads and rounds the main column. The default sidebar variant is a flush rail.

Collapsible groups

Use Accordion with variant="plain" for nested nav groups. Put SidebarList in each panel. Plain panels hide while the icon rail is collapsed.

Related components

Accordion, Avatar, Button, Drawer, List, Tooltip

Accessibility

• The desktop panel is an aside with aria-label (default "Sidebar").
• An offcanvas collapsed panel is inert (out of the tab order). Icon collapse stays focusable.
• Mobile uses Drawer (dialog, overlay, Escape).
• SidebarTrigger sets aria-expanded and aria-controls. The default accessible name is Toggle sidebar.
• SidebarListItem copies string primary to aria-label when the icon rail is collapsed.

Anatomy

div <!-- SidebarProvider -->
  div <!-- Sidebar root: in-flow gap + fixed aside -->
    aside
      header slot
      content <!-- SidebarList / Accordion -->
      footer slot
  main <!-- SidebarInset -->
    SidebarTrigger
    children

Below md, the aside stays mounted and is hidden with CSS. Open state uses a portaled Drawer instead of swapping the rail on first paint.

API

SidebarProvider

Sidebar

SidebarInset

SidebarTrigger

Renders a Button. Forwards native button attributes. Default accessible name is Toggle sidebar. Pass children to replace the default icon.

SidebarList

Same as List, plus:

Applies stacked nav chrome (gap, compact rows, nested guide). Override with iconOnly.

SidebarListItem

Same as ListItem, plus:

Applies compact nav chrome. Tooltips only show while the icon rail is collapsed.

useSidebar

Must be called under SidebarProvider. Vue returns a computed context object (sidebar.value.open, …).