Grouped pages with counts, a section that opens, a plan card and the account menu; collapses to a rail of icons.
$ pnpm dlx shadcn@latest add @dashral/dashboard-sidebarWhen to use
- An app's main navigation: grouped pages with counts, sections that open, a plan card and the account menu.
- Dashboards and admin panels with up to a few dozen pages; it folds to a rail of icons.
When not to use
- Apps organised by workspace and project: Workspace sidebar.
- Apps with only a handful of pages: tabs in the header leave the width to the content.
Usage
Dashboard sidebar with your own data: every prop has the sample as its default, so pass only what you have.
import { DashboardSidebar } from "@/components/dashral/blocks/dashboard-sidebar"
<DashboardSidebar
groups={navGroups}
current={pathname}
onNavigate={(page) => router.push(routes[page])}
brand={{ name: team.name, plan: team.plan }}
user={user}
promo={{ title: `${seats.used} of ${seats.total} seats used`, value: seats.percent, action: "Upgrade", onAction: openUpgrade }}
onAccount={(action) => handleAccount(action)}
/>API reference
DashboardSidebar
A dashboard's sidebar: the product, grouped pages with counts, a section that opens (Reports), a plan card and the account menu. It collapses to a rail of icons with their names in tooltips, and on phones becomes a top bar whose menu opens in a sheet. Every part comes from props: your pages (the one you're on controllable, onNavigate to go there), brand, user and promo card.
| Prop | Type | Default |
|---|---|---|
groups | SidebarGroup[] | sample |
current | stringThe page you're on, by label (the sidebar keeps it without it). | — |
onNavigate | (page: string) => void | — |
brand | Config["brand"] | sample |
user | Config["user"] | sample |
promo | Config["promo"] | sample |
onAccount | Config["onAccount"] | — |
type SidebarItem
A page in the sidebar, with a count, or a section that opens to its children. Pages are named by their label.
| Prop | Type | Default |
|---|---|---|
label | string | — |
icon | React.ReactNode | — |
count | number | — |
children | string[] | — |
type SidebarGroup
| Prop | Type | Default |
|---|---|---|
label | string | — |
items | SidebarItem[] | — |
type AccountAction
What the account menu asks for.
= "profile" | "billing" | "settings" | "sign-out"