A light app header with a workspace breadcrumb and live status, a search button with a Cmd K shortcut, notifications and an account menu, over a row of tabs with counts and a sliding underline.
npx shadcn@latest add https://hyperblur.dev/r/nav-app-header.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/nav-app-header.tsx.
import { NavAppHeader } from "@/components/hyperblur/nav-app-header"
<NavAppHeader showBackdrop={false} onSearch={() => setOpen(true)} />| Prop | Type | Default | Description |
|---|---|---|---|
| breadcrumbs | { label: string; href: string }[] | Northwind, Projects, Atlas redesign | Path from workspace to the current page. The first item gets a workspace badge and middle items hide in narrow containers. |
| status | string | null | "Production" | Pulsing status pill after the last crumb. Pass null to hide it. |
| tabs | { label: string; href: string; count?: number }[] | Overview, Issues, Pull requests, Deployments, Analytics, Settings | Tabs under the top row with optional counters. |
| activeTab | number | Controlled active tab index. Pair with onTabChange. | |
| defaultActiveTab | number | 1 | Active tab when uncontrolled. |
| onTabChange | (index: number, tab: NavAppHeaderTab) => void | Called when a tab is clicked. | |
| searchPlaceholder | string | "Search issues, docs, people" | Text inside the search button. |
| onSearch | () => void | Called by the search button and by Cmd K or Ctrl K anywhere on the page. | |
| notifications | number | 4 | Unread count on the bell. Zero hides the badge. |
| onNotificationsClick | () => void | Called when the bell is clicked. | |
| user | { name: string; email: string } | null | { name: "Sofia Petrov", email: "sofia@northwind.dev" } | Account in the avatar menu. Pass null to hide the avatar. |
| menu | { label: string; href?: string; shortcut?: string; danger?: boolean }[] | Your profile, Workspace settings, Invite teammates, Changelog, Log out | Account menu items. Danger items get a divider and red text. |
| defaultMenuOpen | boolean | false | Start with the account menu open. |
| onMenuItemSelect | (item: NavAppHeaderMenuItem) => void | Called when an account menu item is chosen. | |
| accent | string | "#2f7bff" | Color of the badge, underline glow, active count and focus rings. |
| showBackdrop | boolean | true | Render a faded project page under the header for previews. Turn it off in a real layout. |