Sidebar

Overview

Sidebar provides the left navigation container for SaaS applications. It supports collapsible mode with customizable width, header and footer slots, and an optional collapse toggle button. It integrates with NavigationContext when used inside an AppShell.

Usage

import { Sidebar, SidebarNav } from '@leanicon/web-builder-library/saas'
import { LayoutDashboard, Users, Settings } from 'lucide-react'

const items = [
  { id: 'dashboard', label: 'Dashboard', icon: <LayoutDashboard className="h-4 w-4" /> },
  { id: 'users', label: 'Users', icon: <Users className="h-4 w-4" /> },
  { id: 'settings', label: 'Settings', icon: <Settings className="h-4 w-4" /> },
]

;<Sidebar
  header={<span className="text-sm font-semibold">Acme Inc.</span>}
  footer={<div>User info</div>}
  showCollapseButton
>
  <SidebarNav items={items} activeId="dashboard" />
</Sidebar>

Note on the inline previews below: Sidebar defaults to position="fixed" (anchored to the viewport's left edge — the typical app-shell layout). The previews on this page pass position="static" so the sidebar stays inside its demo frame. In your own app, omit the prop.

Variants

Default

Collapsed

When collapsed, the sidebar narrows to a 64 px rail. Item labels visually collapse (kept for screen readers as sr-only) and the label appears in a tooltip on hover. Pass isCollapsed to SidebarNav so the items pick up the collapsed state when used standalone (outside an AppShell / NavigationProvider).

Without Collapse Button

Dark

Notes

• position="fixed" (default) anchors the sidebar to the viewport's left edge — the normal app-shell usage.
• position="sticky" keeps the sidebar pinned within a scrolling container.
• position="static" makes the sidebar an inline flex/grid child — useful for previews, side-by-side comparisons, and any container that already manages its own layout.
• Inside an AppShell with NavigationProvider, SidebarNav picks up collapsed from context automatically. When used standalone (no provider above), pass isCollapsed directly so the labels collapse and tooltips appear on hover.