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.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
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.