Topbar Shell
Horizontal nav with the Acme lockup, five links, a command hint, and the page below.
Horizontal nav with the Acme lockup, five links, a command hint, and the page below.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
Already purchased? Log in
Topbar Shell swaps the vertical rail for a 14 high horizontal bar: the Acme lockup on the left, five inline nav links (Overview active, then Projects, Members, Billing, Settings), a search affordance with the cmd+K Kbd hint at 56 wide, a Bell notifications button, and the Avery Stone avatar pinned right. Content sits below in a max-w-6xl container with the Overview page header, Friday June 13, everything is operational, a two-thirds drop zone for dashboard content, and a one-third slot for Recent activity.
Nav is one flat array with an active flag. The search button is a styled button element rather than an input so the keyboard hint is a visual affordance only, the real command palette is wired separately.
Reach for this shell when the product has a shallow nav tree, five or fewer sections, and more vertical than horizontal space to burn. Wire aria-current to your router and the search button to your command palette handler.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the shallow-nav SaaS overview. Other topbar fits:
Tip: the bar hides the search input below lg on purpose; open a bottom sheet or modal for mobile search rather than shrinking the Kbd hint.