Design

Catalog NavbarAppllama Nav

You might say

The site keeps growing, but visitors land without knowing what to browse or where to look.

A catalog navbar spreads the whole content map into one persistent top bar: sections, a feature pill, site-wide search, upgrade and identity — each in its lane.Appllama is the archetype: logo wordmark + Apps/Explore/Pricing laid flat + a black pill feature slot + a search field with a / shortcut hint + Go Pro and an avatar to close. It sells the browsing ritual of a directory — you know where you are and where to go within three seconds. BuildHub maps directly: Terms / Skills / Products / Prompts + search + a PRO slot.

Also calledDirectory headerToolbar nav

Design Principles

One bar, four jobs: sections, a feature pill, site-wide search, identity & upgrade — never a fifth
Lay sections flat, no hover menus: cap top-level zones at 5–7; if it overflows, restructure content before nesting
Search is a first-class citizen: pinned right after the sections, always visible, with a / or ⌘K hint, opening a command palette
PRO sits on the outer edge: a Go Pro text link beside the avatar — never competing with sections, never a popup
Light and dark share one layout: the pill goes solid on light, outlined on dark; bar height and spacing never change

Catalog Navbar≠Mega Menu

A mega menu drops a two-tier panel on hover for sprawling catalogs; the catalog navbar stays flat — built for directory-style content sites with few top-level zones.

Catalog Navbar≠Sidebar docs nav

Sidebars serve deep, single-track reading; the top tool belt serves horizontal browsing — hopping between zones, not drilling one tree.

AI Prompt

Restyle the BuildHub header as a catalog navbar: logo tile + wordmark on the left; top-level sections laid flat in the middle (Terms / Skills / Products / Prompts, no dropdowns); one pill right after the sections as the featured slot (Assets); a persistent rounded search field with a / shortcut badge that opens a command palette; on the far right a Go Pro text link plus a round avatar (theme & language switch live inside it). 56px bar, 1px bottom border, light and dark share the layout — only tokens swap. Keep every existing route and feature; don't touch copy.

Typical use cases

BuildHub mapping · light

Scroll sideways to explore the full example

✦BUILDHUBTermsSkillsProductsPromptsAssets⌕ Search terms, skills…/Go Pro✦

One person's index of products, made to browse.

Icon libraryPaywallDark libraryNext.js

BuildHub mapping · dark

Scroll sideways to explore the full example

✦BUILDHUBTermsSkillsProductsPromptsAssets⌕ Search terms, skills…/Go Pro✦

One person's index of products, made to browse.

Icon libraryPaywallDark libraryNext.js

Search expanded · command palette

Scroll sideways to explore the full example

⌕ Type to search everything…esc

TERMSIcon library · Lucide↵

ASSETSLogo assets · 8 styles

SKILLSfrontend-design

SHOWCASEAppllama

↑↓ navigate↵ openBUILDHUB ⌘K