Topbar With Command Hint
Persistent app topbar with breadcrumb trail, centered search with Kbd hint, notifications, and avatar.
Persistent app topbar with breadcrumb trail, centered search with Kbd hint, notifications, and avatar.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
Already purchased? Log in
Topbar With Command Hint is the persistent bar that tops every page: a logo mark and breadcrumb trail on the left (Acme / Projects / Apollo), a centered search button reading Search or jump to with a Kbd hint for Command K, and three affordances on the right, a Feedback button, a Bell with an unread dot, and the Avery Stone avatar. Collapses gracefully: the trail hides below sm, the search bar becomes a ghost icon button, the Feedback label disappears.
The breadcrumb trail is a small data array fed into ui/breadcrumb. The notification dot is a theme-token span, no badge component needed at this scale.
Reach for this block as the fixed header in a topbar shell, wired to your router for breadcrumb hrefs and to your notification endpoint for the unread count.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the project-level topbar. Other configurations:
Tip: the Kbd hint earns its space only when the command palette is actually reachable; wire both or drop both.