Sidebar

Vertical navigation sidebar with groups, labels, search, sub-menus, user profile, header, footer, and collapse toggle. Supports default, collapsible, floating, mini, dark, and bordered variants.

Import

import {
  Sidebar, SidebarHeader, SidebarContent,
  SidebarGroup, SidebarGroupLabel, SidebarMenu,
  SidebarMenuItem, SidebarSeparator, SidebarFooter,
  SidebarTrigger, SidebarSearch,
  SidebarSubMenu, SidebarSubMenuItem,
  SidebarUserProfile, useSidebar,
} from "poyraz-ui/organisms";

Full Featured

Default sidebar with search, user profile, grouped menu items, sub-menus, badges, and footer.

<Sidebar>
  <SidebarHeader>
    <span className="font-bold text-lg">Poyraz UI</span>
  </SidebarHeader>
  <SidebarContent>
    <SidebarSearch placeholder="Search…" />
    <SidebarGroup>
      <SidebarGroupLabel>Main</SidebarGroupLabel>
      <SidebarMenu>
        <SidebarMenuItem icon={<Home className="h-4 w-4" />} active>
          Dashboard
        </SidebarMenuItem>
        <SidebarMenuItem icon={<BarChart3 className="h-4 w-4" />} badge="3">
          Analytics
        </SidebarMenuItem>
        <SidebarMenuItem icon={<Users className="h-4 w-4" />}>
          Users
        </SidebarMenuItem>
      </SidebarMenu>
    </SidebarGroup>
    <SidebarSeparator />
    <SidebarGroup>
      <SidebarGroupLabel>Content</SidebarGroupLabel>
      <SidebarMenu>
        <SidebarSubMenu label="Documents" icon={<FolderOpen className="h-4 w-4" />} defaultOpen>
          <SidebarSubMenuItem active>Drafts</SidebarSubMenuItem>
          <SidebarSubMenuItem>Published</SidebarSubMenuItem>
          <SidebarSubMenuItem>Archived</SidebarSubMenuItem>
        </SidebarSubMenu>
        <SidebarMenuItem icon={<FileText className="h-4 w-4" />}>
          Pages
        </SidebarMenuItem>
      </SidebarMenu>
    </SidebarGroup>
    <SidebarSeparator />
    <SidebarGroup>
      <SidebarGroupLabel>Settings</SidebarGroupLabel>
      <SidebarMenu>
        <SidebarMenuItem icon={<Settings className="h-4 w-4" />}>
          Preferences
        </SidebarMenuItem>
        <SidebarMenuItem icon={<Mail className="h-4 w-4" />}>
          Notifications
        </SidebarMenuItem>
      </SidebarMenu>
    </SidebarGroup>
  </SidebarContent>
  <SidebarFooter>
    <SidebarUserProfile name="Jane Doe" role="Admin" initials="JD" />
  </SidebarFooter>
</Sidebar>

Collapsible

Sidebar that collapses to icon-only with a toggle button. Sub-menus and search hide when collapsed.

<Sidebar variant="collapsible">
  <SidebarHeader>
    <div className="flex items-center justify-between w-full">
      <span className="font-bold">App</span>
      <SidebarTrigger />
    </div>
  </SidebarHeader>
  <SidebarContent>
    <SidebarSearch />
    <SidebarMenu>
      <SidebarMenuItem icon={<LayoutDashboard className="h-4 w-4" />} active>
        Dashboard
      </SidebarMenuItem>
      <SidebarMenuItem icon={<Users className="h-4 w-4" />}>
        Users
      </SidebarMenuItem>
      <SidebarSubMenu label="Settings" icon={<Settings className="h-4 w-4" />}>
        <SidebarSubMenuItem>General</SidebarSubMenuItem>
        <SidebarSubMenuItem>Security</SidebarSubMenuItem>
      </SidebarSubMenu>
    </SidebarMenu>
  </SidebarContent>
</Sidebar>

Dark Variant

Dark-themed sidebar with contrasting borders and adapted colors.

<Sidebar variant="dark">
  <SidebarHeader>
    <span className="font-bold text-lg text-white">Admin</span>
  </SidebarHeader>
  <SidebarContent>
    <SidebarSearch placeholder="Search…" />
    <SidebarGroup>
      <SidebarGroupLabel>Overview</SidebarGroupLabel>
      <SidebarMenu>
        <SidebarMenuItem icon={<Home className="h-4 w-4" />} active>
          Dashboard
        </SidebarMenuItem>
        <SidebarMenuItem icon={<BarChart3 className="h-4 w-4" />} badge="5">
          Reports
        </SidebarMenuItem>
        <SidebarSubMenu label="Security" icon={<ShieldCheck className="h-4 w-4" />}>
          <SidebarSubMenuItem>Roles</SidebarSubMenuItem>
          <SidebarSubMenuItem active>Permissions</SidebarSubMenuItem>
          <SidebarSubMenuItem>Audit Log</SidebarSubMenuItem>
        </SidebarSubMenu>
      </SidebarMenu>
    </SidebarGroup>
    <SidebarSeparator />
    <SidebarGroup>
      <SidebarGroupLabel>Account</SidebarGroupLabel>
      <SidebarMenu>
        <SidebarMenuItem icon={<Bell className="h-4 w-4" />}>
          Notifications
        </SidebarMenuItem>
        <SidebarMenuItem icon={<CreditCard className="h-4 w-4" />}>
          Billing
        </SidebarMenuItem>
      </SidebarMenu>
    </SidebarGroup>
  </SidebarContent>
  <SidebarFooter>
    <SidebarUserProfile name="Alex Smith" role="Developer" initials="AS" />
  </SidebarFooter>
</Sidebar>

Bordered Variant

Sidebar with all-around dashed borders, suited for standalone panels.

<Sidebar variant="bordered">
  <SidebarHeader>
    <span className="font-bold text-lg">Studio</span>
  </SidebarHeader>
  <SidebarContent>
    <SidebarGroup>
      <SidebarGroupLabel>Design</SidebarGroupLabel>
      <SidebarMenu>
        <SidebarMenuItem icon={<Palette className="h-4 w-4" />} active>
          Themes
        </SidebarMenuItem>
        <SidebarMenuItem icon={<Globe className="h-4 w-4" />}>
          i18n
        </SidebarMenuItem>
        <SidebarMenuItem icon={<Code className="h-4 w-4" />}>
          Components
        </SidebarMenuItem>
      </SidebarMenu>
    </SidebarGroup>
  </SidebarContent>
  <SidebarFooter>
    <span className="text-xs text-slate-400">v2.1.0</span>
  </SidebarFooter>
</Sidebar>

Mini Variant

Icon-only sidebar for compact layouts with hover tooltips.

<Sidebar variant="mini">
  <SidebarContent>
    <SidebarMenu>
      <SidebarMenuItem icon={<Home className="h-4 w-4" />}>
        Home
      </SidebarMenuItem>
      <SidebarMenuItem icon={<Users className="h-4 w-4" />}>
        Users
      </SidebarMenuItem>
      <SidebarMenuItem icon={<Settings className="h-4 w-4" />}>
        Settings
      </SidebarMenuItem>
      <SidebarMenuItem icon={<BarChart3 className="h-4 w-4" />}>
        Analytics
      </SidebarMenuItem>
    </SidebarMenu>
  </SidebarContent>
</Sidebar>

With User Profile

User profile in the header with avatar initials and role description.

<Sidebar>
  <SidebarHeader>
    <SidebarUserProfile name="Maria Garcia" role="Product Manager" initials="MG" />
  </SidebarHeader>
  <SidebarContent>
    <SidebarMenu>
      <SidebarMenuItem icon={<LayoutDashboard className="h-4 w-4" />} active>
        Overview
      </SidebarMenuItem>
      <SidebarMenuItem icon={<FileText className="h-4 w-4" />} badge="12">
        Tasks
      </SidebarMenuItem>
      <SidebarMenuItem icon={<Mail className="h-4 w-4" />}>
        Messages
      </SidebarMenuItem>
    </SidebarMenu>
  </SidebarContent>
  <SidebarFooter>
    <span className="text-xs text-slate-400">Logged in as Maria</span>
  </SidebarFooter>
</Sidebar>