Dashboard header

A sidebar toggle and breadcrumb, ⌘K search, notifications and the account menu.

$ pnpm dlx shadcn@latest add @dashral/dashboard-header

When to use

The top bar of a dashboard: where you are, ⌘K search, notifications and the account menu.
Apps with a sidebar it can toggle; pair it with Dashboard sidebar.

When not to use

Marketing sites: Website header or Pill header.
Apps where people switch workspaces all day: Workspace header puts the switch and the section's tabs up front.

Usage

Dashboard header with your own data: every prop has the sample as its default, so pass only what you have.

example.tsx

1import { DashboardHeader } from "@/components/dashral/blocks/dashboard-header"
2
3<DashboardHeader
4  onToggleSidebar={() => setSidebarOpen((open) => !open)}
5  breadcrumb={[{ label: "Customers", href: "/customers" }, { label: customer.name }]}
6  notifications={notifications}
7  onRead={(id) => api.notifications.read(id)}
8  onReadAll={() => api.notifications.readAll()}
9  user={{ name: session.name, email: session.email, src: session.avatar }}
10  onAccount={(action) => action === "sign-out" && signOut()}
11/>

API reference

DashboardHeader

A dashboard's top bar: the sidebar toggle and where you are on the left; search (also on ⌘K / Ctrl+K), notifications and the account menu on the right. The trail, notifications, search and account come from props, with the sample by default; reading a notification calls onRead (all of them, onReadAll).

Prop	Type	Default
`onToggleSidebar`	`() => void`	—
`breadcrumb`	`{ label: string; href?: string }[]` Where you are; the last one is this page (on phones, the only one shown).	`sample`
`notifications`	`HeaderNotification[]` Re-read when you pass a new list.	`sample`
`onRead`	`(id: HeaderNotification["id"]) => void`	—
`onReadAll`	`() => void`	—
`search`	`HeaderSearchGroup[]` The groups in the ⌘K search.	`sample`
`user`	`{ name: string; email: string; src?: string }`	`sample`
`onAccount`	`(action: HeaderAccountAction) => void`	—

type HeaderNotification

One line in the bell's list: who did what, and when (as you'd write it: "2m ago"). Unread unless read.

Prop	Type	Default
`id`	`string \| number`	—
`who`	`string`	—
`what`	`string`	—
`when`	`string`	—
`src`	`string`	—
`read`	`boolean`	—

type HeaderSearchItem

A row in the ⌘K search; it closes the search when picked.

Prop	Type	Default
`label`	`string`	—
`icon`	`React.ReactNode`	—
`shortcut`	`string`	—
`onSelect`	`() => void`	—

type HeaderSearchGroup

Prop	Type	Default
`heading`	`string`	—
`items`	`HeaderSearchItem[]`	—

type HeaderAccountAction

What the account menu asks for.

= "profile" | "billing" | "settings" | "sign-out"