An app header where each breadcrumb is a switcher: team, project and environment open searchable lists with keyboard control. Picking a team cascades to its first project and environment, and changed crumbs swap in with a short blur.
npx shadcn@latest add https://hyperblur.dev/r/navbar-breadcrumb-switcher.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/navbar-breadcrumb-switcher.tsx.
import { NavbarBreadcrumbSwitcher } from "@/components/hyperblur/navbar-breadcrumb-switcher"
<NavbarBreadcrumbSwitcher orgs={teams} onValueChange={navigate} showBackdrop={false} />| Prop | Type | Default | Description |
|---|---|---|---|
| orgs | NavbarBreadcrumbSwitcherOrg[] | Acme Studio, Ines Duarte, Northwind Labs | Teams with their projects and each project's environments. |
| value | { org: string; project: string; env: string } | Controlled selection. Pair with onValueChange. | |
| defaultValue | { org: string; project: string; env: string } | First team, project and environment | Selection when uncontrolled. |
| onValueChange | (value: NavbarBreadcrumbSwitcherValue) => void | Called when any crumb changes. | |
| onCreate | (level: "org" | "project" | "env") => void | When set, each switcher shows a New button that calls it. | |
| status | { label: string; tone?: "ready" | "building" | "error" } | null | { label: "Ready, deployed 2m ago", tone: "ready" } | Status pill with a pulsing dot. Pass null to hide it. |
| user | { name: string; initials?: string } | null | { name: "Ines Duarte", initials: "ID" } | Avatar on the right. Pass null to hide it. |
| defaultOpen | "org" | "project" | "env" | null | null | Switcher that starts open. |
| accent | string | "#2f7bff" | Paid plan badge, check marks and focus rings. |
| showBackdrop | boolean | true | Render sample page content behind the navbar for previews. Turn it off in a real layout. |