The React Sidebar component lets users navigate an application's sections via a side menu. It is commonly used in dashboards, admin panels, and multi-page apps.

It allows users to access links, expand nested menus, and collapse the sidebar to save space. For example, users can switch between sections like dashboard, settings, and reports using grouped navigation items.

Built with React and styled with Tailwind CSS, it supports collapsible layouts, off-canvas mobile behavior, keyboard shortcuts, and accessible navigation.

Installation

npx @tailgrids/cli add sidebar

Concepts & Key Components

The Sidebar is composed of several complementary primitives allowing you to build rich, deeply nested navigation layouts without fighting predetermined DOM trees.

Structure & Anatomy

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>
  );
}

Important Components

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.

Examples

Basic Example

PreviewCode

Light Theme

Copy to clipboard

TailgridsEnterprise

Platform

• Playground

  • History
  • Starred
  • Settings
• Models
• Documentation
• Settings

ahmedrtusartusar@gmail.com

Toggle Sidebar

1. Platform
2. Playground
3. History

Variants

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.

Collapsible Modes

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.

API Reference

The Sidebar component is composed of several primitives, each exported with its own set of props and customizable data attributes for advanced styling.

SidebarProvider

The root component that manages the sidebar state, mobile responsiveness, and keyboard shortcuts.

Sidebar

The main container for the sidebar, handling visual variants and collapsible behavior.

SidebarTrigger

A button component used to toggle the sidebar's open/collapsed state.

SidebarHeader

The top section of the sidebar, typically used for logos or team switchers.

SidebarContent

The main scrollable area of the sidebar for navigation links and groups.

SidebarFooter

The bottom section of the sidebar, often used for user profiles or secondary actions.

SidebarGroup

A container used to group related navigation items.

SidebarGroupLabel

A label for a sidebar group, which fades out when the sidebar is collapsed in icon mode.

SidebarGroupContent

A wrapper for the content within a sidebar group.

SidebarMenu

The root list component for navigation items.

SidebarMenuItem

A wrapper for an individual menu item.

SidebarMenuButton

The primary interaction element for navigation.

SidebarMenuSub

A nested list container for secondary navigation items.

SidebarMenuSubItem

A wrapper for an individual sub-menu item.

SidebarMenuSubButton

The interaction element for nested navigation items. Renders an a tag.

Accessibility

• Semantic structure: Use the sidebar as a navigation region (e.g., a <nav> element) with grouped, nested links so screen readers can understand the structure.
• Keyboard support: Users can navigate between items using keyboard keys and toggle the sidebar using shortcuts such as Ctrl + B or Cmd + B.
• Focus management: Focus moves between menu items and stays usable when the sidebar is expanded, collapsed, or in mobile view.
• Trigger behavior: The sidebar is controlled by a trigger button and managed through the SidebarProvider, supporting both mouse and keyboard interaction.
• Screen reader support: Active items, expanded groups, and navigation hierarchy are announced clearly.
• Collapsed state: When collapsed to icons, provide tooltips or labels so users can still understand each navigation item.
• Mobile behavior: On smaller screens, the sidebar behaves like an off-canvas panel, with focus trapped within and background interactions disabled.