Sidebar

A context-driven collapsible sidebar with icon-only collapsed mode. Uses SidebarProvider for state management so any descendant can trigger open/close.

✓Collapsible to 64px icon-only mode
✓Full 240px open mode with labels
✓Context-based state via SidebarProvider
✓Flexible menu, group, and footer slots

Main content

Click the trigger to collapse the sidebar.

import { Sidebar }from "@aetherstack/ui"

sidebar.tsx

"use client"

import {
  SidebarProvider,
  Sidebar,
  SidebarContent,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuItem,
  SidebarMenuButton,
  SidebarTrigger,
} from "@/components/ui/sidebar"
import { LayoutDashboard, Users, Settings } from "lucide-react"

export function SidebarDemo() {
  return (
    <SidebarProvider>
      <div className="flex h-screen">
        <Sidebar>
          <SidebarHeader>
            <span className="font-semibold">My App</span>
          </SidebarHeader>
          <SidebarContent>
            <SidebarMenu>
              <SidebarMenuItem>
                <SidebarMenuButton>
                  <LayoutDashboard className="h-4 w-4" />
                  <span>Dashboard</span>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton>
                  <Users className="h-4 w-4" />
                  <span>Users</span>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton>
                  <Settings className="h-4 w-4" />
                  <span>Settings</span>
                </SidebarMenuButton>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarContent>
        </Sidebar>
        <main className="flex-1 p-6">
          <SidebarTrigger />
        </main>
      </div>
    </SidebarProvider>
  )
}

Usage

With group labels

Use SidebarGroup with SidebarGroupLabel to organize menu sections.

Props

Prop	Type	Default	Description

SidebarProvider

Prop	Type	Default	Description
defaultOpen	boolean	true	Initial open state (uncontrolled).
open	boolean	—	Controlled open state.
onOpenChange	(open: boolean) => void	—	Callback fired when the sidebar open state changes.

SidebarMenuButton

Prop	Type	Default	Description
isActive	boolean	false	Highlights the button as the currently active route.
asChild	boolean	—	Render as a child component (e.g. a Next.js Link).

useSidebar

Prop	Type	Default	Description
open	boolean	—	Current open state of the sidebar.
setOpen	(open: boolean) => void	—	Programmatically set the sidebar open state.
toggle	() => void	—	Toggle the sidebar between open and collapsed.

* Required props

Accessibility

→SidebarTrigger renders as a Button with an aria-label describing the open/close action.
→When collapsed to icon-only mode, visible text labels are hidden but remain in the DOM for screen readers.
→Use SidebarMenuButton with asChild and a Next.js Link for proper keyboard and screen reader navigation.
→Ensure SidebarMenuButton isActive is set on the current route for aria-current support.