Topbar With Command Hint

About this block

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.

When to use

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

• Nothing, the topbar is the top of the page

After

• Tab navigation panel
• Kpi cards row

What you can display

One strong use is the project-level topbar. Other configurations:

• Workspace root. Single breadcrumb item, the workspace name only, no project segment.
• Admin context. Replace the breadcrumb with a compact org switcher trigger.
• Read only. Drop Feedback and leave Bell plus avatar for viewer-role surfaces.

Tip: the Kbd hint earns its space only when the command palette is actually reachable; wire both or drop both.