Sidebar

Vertical navigation sidebar with groups, labels, search, sub-menus, user profile, branding, collapsible sections, badges, menu actions, header, footer, and collapse toggle. Supports default, collapsible, floating, mini, bordered, and inset variants.

Import

import {
  Sidebar, SidebarHeader, SidebarBranding, SidebarContent,
  SidebarGroup, SidebarGroupLabel, SidebarSection,
  SidebarMenu, SidebarMenuItem, SidebarMenuAction,
  SidebarSeparator, SidebarBadge, 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>

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>

Inset Variant

Rounded sidebar with subtle shadow, ideal for embedded layouts inside a page.

<Sidebar variant="inset">
  <SidebarHeader>
    <SidebarBranding logo={<Zap className="h-4 w-4" />} title="Workspace" subtitle="Team Pro" />
  </SidebarHeader>
  <SidebarContent>
    <SidebarMenu>
      <SidebarMenuItem icon={<Home className="h-4 w-4" />} active>Dashboard</SidebarMenuItem>
      <SidebarMenuItem icon={<FileText className="h-4 w-4" />}>Documents</SidebarMenuItem>
      <SidebarMenuItem icon={<Users className="h-4 w-4" />}>Members</SidebarMenuItem>
    </SidebarMenu>
  </SidebarContent>
  <SidebarFooter>
    <span className="text-xs text-slate-400">Inset layout</span>
  </SidebarFooter>
</Sidebar>

With Branding

SidebarBranding provides a logo + title + subtitle combo in the header. Collapses to icon-only gracefully.

<Sidebar variant="collapsible">
  <SidebarHeader>
    <SidebarBranding
      logo={<Box className="h-4 w-4" />}
      title="Poyraz UI"
      subtitle="Component Library"
    />
    <SidebarTrigger />
  </SidebarHeader>
  <SidebarContent>
    <SidebarMenu>
      <SidebarMenuItem icon={<LayoutDashboard className="h-4 w-4" />} active>
        Overview
      </SidebarMenuItem>
      <SidebarMenuItem icon={<Palette className="h-4 w-4" />}>Themes</SidebarMenuItem>
      <SidebarMenuItem icon={<Code className="h-4 w-4" />}>Components</SidebarMenuItem>
    </SidebarMenu>
  </SidebarContent>
</Sidebar>

Collapsible Sections

SidebarSection adds collapsible group titles with a chevron toggle. Click a section title to expand/collapse.

<Sidebar>
  <SidebarHeader>
    <span className="font-bold text-lg">App</span>
  </SidebarHeader>
  <SidebarContent>
    <SidebarSection title="Navigation" defaultOpen>
      <SidebarMenu>
        <SidebarMenuItem icon={<Home className="h-4 w-4" />} active>Home</SidebarMenuItem>
        <SidebarMenuItem icon={<BarChart3 className="h-4 w-4" />}>Analytics</SidebarMenuItem>
      </SidebarMenu>
    </SidebarSection>
    <SidebarSeparator />
    <SidebarSection title="Management" defaultOpen={false}>
      <SidebarMenu>
        <SidebarMenuItem icon={<Users className="h-4 w-4" />}>Users</SidebarMenuItem>
        <SidebarMenuItem icon={<ShieldCheck className="h-4 w-4" />}>Roles</SidebarMenuItem>
        <SidebarMenuItem icon={<CreditCard className="h-4 w-4" />}>Billing</SidebarMenuItem>
      </SidebarMenu>
    </SidebarSection>
    <SidebarSeparator />
    <SidebarSection title="System" collapsible={false}>
      <SidebarMenu>
        <SidebarMenuItem icon={<Settings className="h-4 w-4" />}>Settings</SidebarMenuItem>
      </SidebarMenu>
    </SidebarSection>
  </SidebarContent>
</Sidebar>

With Menu Actions

SidebarMenuAction adds hover-visible action buttons to menu items. Pass via the action prop on SidebarMenuItem.

<Sidebar>
  <SidebarHeader>
    <span className="font-bold text-lg">Projects</span>
  </SidebarHeader>
  <SidebarContent>
    <SidebarMenu>
      <SidebarMenuItem
        icon={<FileText className="h-4 w-4" />}
        active
        action={<SidebarMenuAction><MoreHorizontal className="h-3.5 w-3.5" /></SidebarMenuAction>}
      >
        Design System
      </SidebarMenuItem>
      <SidebarMenuItem
        icon={<FileText className="h-4 w-4" />}
        badge={<SidebarBadge variant="dot" />}
        action={<SidebarMenuAction><Star className="h-3.5 w-3.5" /></SidebarMenuAction>}
      >
        Marketing Site
      </SidebarMenuItem>
      <SidebarMenuItem
        icon={<FileText className="h-4 w-4" />}
        action={<SidebarMenuAction><Trash2 className="h-3.5 w-3.5" /></SidebarMenuAction>}
      >
        Legacy App
      </SidebarMenuItem>
    </SidebarMenu>
  </SidebarContent>
</Sidebar>

Badges

SidebarBadge supports default (filled), dot (notification indicator), and outline variants.

<Sidebar>
  <SidebarHeader>
    <span className="font-bold text-lg">Notifications</span>
  </SidebarHeader>
  <SidebarContent>
    <SidebarMenu>
      <SidebarMenuItem icon={<Mail className="h-4 w-4" />} badge={<SidebarBadge>5</SidebarBadge>}>
        Inbox
      </SidebarMenuItem>
      <SidebarMenuItem icon={<Bell className="h-4 w-4" />} badge={<SidebarBadge variant="dot" />}>
        Alerts
      </SidebarMenuItem>
      <SidebarMenuItem icon={<Globe className="h-4 w-4" />} badge={<SidebarBadge variant="outline">New</SidebarBadge>}>
        Updates
      </SidebarMenuItem>
    </SidebarMenu>
  </SidebarContent>
</Sidebar>