A composable, themeable and customizable sidebar component built with React and styled using Tailwind CSS.
Sidebars are central to any application and often contain a lot of moving parts. This component provides a solid foundation that is responsive, accessible, and highly flexible.
The Sidebar is composed of several complementary primitives allowing you to build rich, deeply nested navigation layouts without fighting predetermined DOM trees.
A typical application layout places a SidebarProvider wrapping your entire application shell. Inside it goes your Sidebar (which behaves like navigation off-canvas) alongside your <main> content container.
import { SidebarProvider, SidebarTrigger } from "@/registry/core/sidebar";import { AppSidebar } from "./app-sidebar";export default function Layout({ children }: { children: React.ReactNode }) { return ( <SidebarProvider> {/* Renders your customized <Sidebar> component instance */} <AppSidebar /> <main className="w-full flex-1"> {/* Opens/Closes the sidebar on click */} <SidebarTrigger /> {children} </main> </SidebarProvider> );}
Here are the most critical components supplied in the Sidebar registry and how they function:
SidebarProvider: Handles collapsible state, mobile viewport tracking, cookie persistence, and keyboard shortcuts (CMD + B / CTRL + B). You must wrap your application navigation inside this component.
Sidebar: The actual physical sidebar container. It listens to the SidebarProvider to smoothly expand/collapse or shrink into an icon list based on your collapsible parameters.
SidebarGroup & SidebarGroupLabel: Semantically groups related navigational lists logically (e.g., "Settings", "Marketing"). Group labels gracefully fade out when the sidebar is minimized to icon layout.
SidebarMenuButton: Primary navigation element inside lists. Use this for actual links because it automatically hooks into isActive states and correctly registers contextual hover tooltip components when the sidebar operates in icon collapsed mode. You can use the render prop to wrap Next.js <Link> elements transparently or replace the <button> tag with an <a> or <Link> tag.
The Sidebar component accepts a variant prop allowing you to choose between standard off-canvas sidebar, a visually detached floating layout with shadows, and a contained inset boxed layout. Use the toggles below to compare styling changes in real-time.
Sidebar Variants
Analytics
Settings
sidebar layout
Main content area reflecting sidebar variant changes.
The collapsible prop allows configuring the exact behavior when the SidebarTrigger is toggled:
icon (default here): Shrinks the sidebar minimally to the width of the navigation icons. SidebarMenuButton wrappers detect this and gracefully show their tooltip props on hover to keep links identifiable.
offcanvas: Completely slides the sidebar out of the user's viewport on desktop, freeing up maximum space.
Collapsible App
Metrics
icon style
When clicking the trigger, the sidebar shrinks to icons. Tooltips will appear on hover.
The Sidebar component is composed of several primitives, each exported with its own set of props and customizable data attributes for advanced styling.
Keyboard Interaction: The library ships out-of-the-box keyboard integration enabling a user to toggle visibility quickly using CMD + B (or CTRL + B) on window active state.
Mobile Hand-off: During mobile media detection (isMobile = true), collapsed sidebars fundamentally switch DOM primitives to power a custom off-canvas Drawer (Sheet) which perfectly routes modal semantics, screen dimming drops, and standard focus-traps out of the box.
Screen Reader Support: Complex DOM configurations natively implement data-state metadata tags and standard ARIA labeling conventions (e.g. aria-expanded="false") allowing seamless screen-reader tree discovery without complex overrides.
