Dashboard sidebar with a brand header, grouped nav items, Lucide icons, trailing count badges, and an active state. Collapse is driven from the shell topbar via the `collapsed` prop (icon rail when true).
The import and the props worth knowing about, in one place.
import { SidebarNav } from "@/components/beste/component/sidebar-nav";
import { LayoutDashboard, Users } from "lucide-react";
// The collapse toggle lives in your topbar; pass `collapsed` down.
<SidebarNav
brand={{ name: "Acme Inc" }}
collapsed={collapsed}
defaultActiveId="dashboard"
groups={[
{
label: "Overview",
items: [
{ id: "dashboard", label: "Dashboard", icon: LayoutDashboard },
{ id: "customers", label: "Customers", icon: Users, badge: 24 },
],
},
]}
onNavigate={(id) => console.log("navigate:", id)}
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
brand | { name: string; icon?: LucideIcon } | — | |
groups* | SidebarNavGroup[] | — | |
activeId | string | — | Controlled active item id; omit to let the component track it |
defaultActiveId | string | — | |
onNavigate | (id: string) => void | — | |
collapsed | boolean | — | Collapsed (icon-rail) state. The collapse toggle lives in the shell's topbar, not inside the sidebar — pass this from the shell. Falls back to `defaultCollapsed` when omitted. |
defaultCollapsed | boolean | — | |
className | string | — |
| Actions | ||||||
|---|---|---|---|---|---|---|
A Amara Okafor[email protected] | Scale | Active | $4,820 | Jan 4, 2026 | ||
D Diego Santos[email protected] | Starter | Trial | $0 | Feb 18, 2026 | ||
P Priya Nair[email protected] | Growth | Active | $2,140 | Nov 22, 2025 | ||
T Tom Fischer[email protected] | Starter | Churned | $380 | Aug 9, 2025 | ||
L Lena Björk[email protected] | Scale | Active | $6,390 | Mar 2, 2026 | ||
M Marcus Reed[email protected] | Starter | Trial | $0 | Feb 27, 2026 |
8 row(s)