Starting your winter arc? 🥶 Get 25% off every plan and template with
WensityWensity

Sidebar

App sidebars with collapsible rails, grouped sections, badge counts, resizable widths, and keyboard shortcut support.

sidebarnavigationnavcollapsiblerailresizablelayout
Loading preview

Examples

Practical examples and common states for the same installable component.

Collapsible

Shrinks the sidebar to an icon rail while preserving navigation access.

examples/sidebar-collapsible.tsx
import {
  Sidebar,
  SidebarHeader,
  SidebarNav,
  SidebarSection,
  SidebarItem,
  SidebarFooter,
  SidebarToggle,
} from "@/components/wensity/sidebar";
import { IconLayoutDashboard, IconChartAreaLine, IconFolders, IconSettings } from "@tabler/icons-react";


export function SidebarCollapsible() {
  return (
    <Sidebar variant="collapsible" width={220}>
      <SidebarHeader>
        <span className="text-sm font-semibold">Acme Inc</span>
        <SidebarToggle className="ml-auto" />
      </SidebarHeader>
      <SidebarNav>
        <SidebarSection>
          <SidebarItem icon={<IconLayoutDashboard className="size-[18px]" />} active>
            Dashboard
          </SidebarItem>
          <SidebarItem icon={<IconChartAreaLine className="size-[18px]" />}>Analytics</SidebarItem>
          <SidebarItem icon={<IconFolders className="size-[18px]" />}>Projects</SidebarItem>
          <SidebarItem icon={<IconSettings className="size-[18px]" />}>Settings</SidebarItem>
        </SidebarSection>
      </SidebarNav>
      <SidebarFooter>
        <span className="text-xs text-muted-foreground">jordan@acme.com</span>
      </SidebarFooter>
    </Sidebar>
  );
}

Icon Rail

Compact icon-only navigation. Labels surface as native tooltips.

examples/sidebar-icon-rail.tsx
import { Sidebar, SidebarNav, SidebarSection, SidebarItem } from "@/components/wensity/sidebar";
import { IconLayoutDashboard, IconChartAreaLine, IconInbox, IconBell, IconSettings } from "@tabler/icons-react";


export function SidebarIconRail() {
  return (
    <Sidebar variant="icon-rail" aria-label="Icon navigation">
      <SidebarNav>
        <SidebarSection>
          <SidebarItem icon={<IconLayoutDashboard className="size-[18px]" />} active>
            Dashboard
          </SidebarItem>
          <SidebarItem icon={<IconChartAreaLine className="size-[18px]" />}>Analytics</SidebarItem>
          <SidebarItem icon={<IconInbox className="size-[18px]" />}>Inbox</SidebarItem>
          <SidebarItem icon={<IconBell className="size-[18px]" />}>Notifications</SidebarItem>
          <SidebarItem icon={<IconSettings className="size-[18px]" />}>Settings</SidebarItem>
        </SidebarSection>
      </SidebarNav>
    </Sidebar>
  );
}

Nested

Expandable multi-level navigation groups with an inset guide line.

examples/sidebar-nested.tsx
import { Sidebar, SidebarNav, SidebarSection, SidebarItem, SidebarNested } from "@/components/wensity/sidebar";
import { IconRocket, IconShield } from "@tabler/icons-react";


export function SidebarNestedDemo() {
  return (
    <Sidebar width={230}>
      <SidebarNav>
        <SidebarSection label="Platform">
          <SidebarNested icon={<IconRocket className="size-[18px]" />} label="Deployments" defaultOpen>
            <SidebarItem>Production</SidebarItem>
            <SidebarItem>Staging</SidebarItem>
          </SidebarNested>
          <SidebarNested icon={<IconShield className="size-[18px]" />} label="Security" defaultOpen active>
            <SidebarItem active>API Keys</SidebarItem>
            <SidebarItem>Audit Log</SidebarItem>
            <SidebarItem>Single Sign-On</SidebarItem>
          </SidebarNested>
        </SidebarSection>
      </SidebarNav>
    </Sidebar>
  );
}

Floating

Detached sidebar with inset spacing, rounded edges, and a soft shadow.

examples/sidebar-floating.tsx
import { Sidebar, SidebarNav, SidebarSection, SidebarItem } from "@/components/wensity/sidebar";
import { IconInbox, IconBox, IconUsers } from "@tabler/icons-react";


export function SidebarFloating() {
  return (
    <Sidebar variant="floating" width={220}>
      <SidebarNav>
        <SidebarSection>
          <SidebarItem icon={<IconInbox className="size-[18px]" />} active>
            Inbox
          </SidebarItem>
          <SidebarItem icon={<IconBox className="size-[18px]" />}>Products</SidebarItem>
          <SidebarItem icon={<IconUsers className="size-[18px]" />}>Customers</SidebarItem>
        </SidebarSection>
      </SidebarNav>
    </Sidebar>
  );
}

Resizable

Drag the edge to adjust width. Arrow keys resize; double-click resets.

examples/sidebar-resizable.tsx
import { Sidebar, SidebarNav, SidebarSection, SidebarItem } from "@/components/wensity/sidebar";
import { IconLayoutDashboard, IconChartAreaLine, IconUsers } from "@tabler/icons-react";


export function SidebarResizable() {
  return (
    <Sidebar variant="resizable" width={220} minWidth={170} maxWidth={340}>
      <SidebarNav>
        <SidebarSection label="Reports">
          <SidebarItem icon={<IconLayoutDashboard className="size-[18px]" />}>Dashboard</SidebarItem>
          <SidebarItem icon={<IconChartAreaLine className="size-[18px]" />} active>
            Customer Analytics
          </SidebarItem>
          <SidebarItem icon={<IconUsers className="size-[18px]" />}>Cohort Retention</SidebarItem>
        </SidebarSection>
      </SidebarNav>
    </Sidebar>
  );
}

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add sidebar

Usage

Import Sidebar from @/components/wensity/sidebar and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
import {
  Sidebar,
  SidebarHeader,
  SidebarNav,
  SidebarSection,
  SidebarItem,
  SidebarFooter,
  SidebarToggle,
} from "@/components/wensity/sidebar";
import { IconLayoutDashboard, IconChartAreaLine, IconSettings } from "@tabler/icons-react";


export function SidebarDemo() {
  return (
    <div className="flex h-[420px] overflow-hidden rounded-2xl border">
      <Sidebar variant="collapsible" width={240} aria-label="Main navigation">
        <SidebarHeader>
          <span className="text-sm font-semibold">Acme Inc</span>
          <SidebarToggle className="ml-auto" />
        </SidebarHeader>
        <SidebarNav>
          <SidebarSection label="Workspace">
            <SidebarItem icon={<IconLayoutDashboard className="size-[18px]" />} active>
              Dashboard
            </SidebarItem>
            <SidebarItem icon={<IconChartAreaLine className="size-[18px]" />}>
              Analytics
            </SidebarItem>
            <SidebarItem icon={<IconSettings className="size-[18px]" />}>
              Settings
            </SidebarItem>
          </SidebarSection>
        </SidebarNav>
        <SidebarFooter>
          <span className="text-xs text-muted-foreground">jordan@acme.com</span>
        </SidebarFooter>
      </Sidebar>
      <main className="flex-1 p-6">Content</main>
    </div>
  );
}

Props

PropTypeDefaultDescription
variant"default" | "collapsible" | "icon-rail" | "floating" | "resizable""default"Sidebar behaviour. icon-rail collapses to icons; resizable adds a drag handle.
collapsedboolean-Controlled collapsed state, for the collapsible variant.
defaultCollapsedbooleanfalseInitial collapsed state when uncontrolled.
onCollapsedChange(collapsed: boolean) => void-Called when the collapsed state changes.
widthnumber260Expanded width in pixels.
collapsedWidthnumber60Collapsed width in pixels, for icon-rail and collapsible.
minWidthnumber180Smallest width the resizable variant may be dragged to.
maxWidthnumber400Largest width the resizable variant may be dragged to.

Featured in React navbar components.