Skip to content

[data-js-navigation-trigger] { display: none !important; }

Back to ComponentsComponent

Sidebar

Open-code aq-ui accessible component family for Sidebar.

Preview

This is a live example. Interact with the available controls and use the keyboard to inspect the component's states and behavior.

Loading interactive preview…

Installation

pnpm dlx aq-ui@alpha add sidebar

API reference

Client moduleView full source

Quick start

"use client"

import { Sidebar } from "@/components/ui/sidebar"

<Sidebar />

Exports

Sidebar const
SidebarContent const
SidebarFooter const
SidebarGroup const
SidebarGroupAction const
SidebarGroupContent const
SidebarGroupLabel const
SidebarHeader const
SidebarInput const
SidebarInset const
SidebarMenu const
SidebarMenuAction const
SidebarMenuBadge const
SidebarMenuButton const
SidebarMenuItem const
SidebarMenuSkeleton const
SidebarMenuSub const
SidebarMenuSubButton const
SidebarMenuSubItem const
SidebarProvider const
SidebarRail const
SidebarSeparator const
SidebarTrigger const
useSidebar function

Registry dependencies

button, input, separator, sheet, skeleton, tooltip, use-breakpoint, utils

Package dependencies

@base-ui/react@^1.7.0, class-variance-authority@^0.7.1, lucide-react@^1.31.0

Files

components/ui/sidebar.tsx

Source