Sidebar Component

A composable, themeable and customizable sidebar component.

Features

  • Responsive design - Sheet overlay on mobile, persistent sidebar on desktop
  • Collapsible with icon-only mode
  • Three variants: Sidebar (default), Floating, and Inset
  • State persistence via cookies
  • Keyboard shortcuts (Ctrl/Cmd + B to toggle)
  • Automatic tooltips in collapsed state
  • Flexible composition with menu groups, submenus, and actions
  • Full shadcn/ui compatibility

Installation

The sidebar component requires the Sheet primitive for mobile functionality.

Add the SidebarProvider to your MainLayout.razor to enable sidebar functionality throughout your app.

Menu Collapse Mode

Collapse Mode:
Click the trigger button to see the difference

Basic Sidebar

A simple sidebar with menu items.

Dashboard

With Navigation

Menu items that navigate to different pages using Href property.

Navigation Demo

This demo shows menu buttons that navigate using the Href property.

Key Features:

  • Automatic NavLink rendering when Href is provided
  • Active state detection based on current route
  • Match parameter controls how URLs are matched (All or Prefix)
  • No need to set AsChild - it's automatic!

With Menu Groups

Organize menu items into logical groups.

Projects

This example shows menu groups with separators.

With Submenus

Nested navigation with submenu items.

Team Portal

Click on Team or Projects to see submenu items.

Floating Variant

Sidebar with floating appearance and rounded corners.

Floating Sidebar

The floating variant adds visual separation with rounded corners.

Inset Variant

Sidebar with inset content area.

Inset Sidebar

The inset variant creates a contained layout with margins.

Collapsible to Icons

Sidebar that collapses to show only icons with tooltips.

Icon-Only Mode

Hover over icons to see tooltips. Click the trigger to expand.

Tree View

Hierarchical file/folder structure with nested items.

File Explorer

Tree view showing hierarchical file structure.

With Sticky Header

Site header above sidebar with coordinated layout.

Company Name

Analytics Dashboard

Site header stays fixed above the sidebar.

With Header Dropdown

Version selector dropdown in sidebar header.

> Quick Start

Sidebar header includes a version dropdown selector.

Collapsible Submenus

Expandable menu groups with chevron indicators.

Overview

Menu items with chevron icons indicate collapsible submenus.

3-Level Nested Menu

Deep nesting with collapsible submenus at level 2.

3-Level Nesting Demo

This example demonstrates 3-level menu nesting:

  • Level 1: Projects (top-level collapsible)
  • Level 2: Active Projects, Archived Projects, Project Settings
  • Level 3: General Settings, Access Control, Notifications, Integrations (nested under Project Settings)

Keyboard Shortcuts

Key Action
Ctrl + B / Cmd + B Toggle sidebar open/closed

API Reference

SidebarProvider

The root provider component that manages sidebar state.

Prop Type Default Description
DefaultOpen bool true Initial open state
Variant SidebarVariant Sidebar Visual variant (Sidebar, Floating, Inset)
Side SidebarSide Left Side to render (Left, Right)
CookieKey string "sidebar:state" Cookie key for persistence

SidebarMenuButton

Clickable menu item with tooltip support.

Prop Type Default Description
Tooltip string? null Tooltip shown in collapsed state
Size string "default" Size variant (sm, default, lg)
Variant string "default" Style variant (default, outline)
IsActive bool false Active/selected state
AsChild string "button" Element type (button, a)

When to Use

Use When

  • Building multi-page applications with persistent navigation
  • Creating dashboard layouts
  • Need responsive navigation (mobile + desktop)
  • Want collapsible sidebar for more screen space
  • Building admin panels or SaaS applications

Avoid When

  • Building single-page marketing sites
  • Simple websites with top navigation
  • Mobile-first apps where drawer is preferred
  • Very minimal UI requirements
An unhandled error has occurred. Reload 🗙