Sidebar

A flexible and responsive sidebar component with support for nested navigation, collapsible states, and multiple variants. Perfect for application layouts and navigation systems.

Enhanced Sidebar Demo

This sidebar features an integrated footer that combines:

  • • User profile with avatar and status indicator
  • • Responsive collapse/expand functionality
  • • Smooth animations and hover effects
  • • Dark mode support
  • • Mobile-responsive design

Try it out:

Click the collapse button to see how the sidebar adapts, or click on the user profile area for custom actions.

Sidebar Component Usage
tsx
1import {
2  Sidebar,
3  SidebarProvider,
4  SidebarHeader,
5  SidebarContent,
6  SidebarUser,
7  SidebarNav,
8  SidebarMobileToggle,
9  SidebarLayout,
10  type SidebarNavItem,
11} from "@/app/ui/molecules/Sidebar";
12

13// Navigation items
14const navItems: SidebarNavItem[] = [
15  {
16    title: "Dashboard",
17    href: "/dashboard",
18    icon: <DashboardIcon />,
19    isActive: true,
20  },