UI Navbars Catalog

Fifteen named, responsive navigation patterns. Each includes a burger (or equivalent) at a documented breakpoint. See CATALOG.md for AI prompt recipes. Resize the viewport to exercise mobile drawers.

.nav-classic-brand

Classic Brand Bar

Logo left · links · CTA. Burger ≤768px opens an under-bar link list.

Harbor
Sign up

Demo page

Classic marketing header with a single CTA.

.nav-split-cluster

Split Cluster Nav

Three zones: brand, primary links, utility + avatar. Burger ≤768px merges both clusters.

Northstar

Account

Workspace

App shell with primary vs account clusters.

.nav-logo-island

Centered Logo Island

Grid island with centered logo. Burger ≤640px; logo stays centered.

ATELIER

Boutique

Editorial layout with a balanced logo island.

.nav-underline-tabs

Underline Tab Nav

Desktop underline tabs. Burger ≤768px switches to left-accent drawer rows.

Ledger

Finance app

Section tabs with a clear active indicator.

.nav-pill-segment

Pill Segment Nav

Links live in a shared pill track. Burger ≤768px expands soft-pill rows.

Pulse Export

Analytics

Segmented control styled as primary navigation.

.nav-mega-panel

Mega Panel Nav

Desktop mega panel under Products. Burger ≤900px uses accordion sections.

Cascade
Products Analytics Automation Marketing Support
Company Pricing Customers

Product site

Wide mega menu on desktop; accordion on smaller screens.

.nav-overlay-glass

Transparent Overlay Nav

Glass bar over a hero. Burger ≤768px opens a solid light drawer for contrast.

Summit
Book trip

Hero destination

Overlay navigation for cinematic landings.

.nav-search-forward

Search-Forward Nav

Search dominates the bar. Burger ≤768px opens links only; search stays visible.

Findly

Search hub

Sparse links beside a growing search field.

.nav-bottom-dock

Bottom App Dock

Desktop top links. ≤640px uses a fixed bottom icon dock; burger holds overflow links.

Pocket

Mobile-first app

Primary destinations live in the bottom dock on small screens.

.nav-dual-tier

Dual Tier Nav

Utility strip above the main bar. Burger ≤768px merges Account then Menu groups.

EN Help center Sign in
Parcel Get a quote

Logistics site

Two tiers on desktop; one grouped drawer on mobile.

.nav-icon-rail-top

Icon Rail Top Nav

Icon + label toolbar. Burger ≤768px flattens into icon+label list rows.

Studio

Design tool

Compact app toolbar navigation.

.nav-slide-over

Slide-Over Drawer Nav

Minimal top bar + persistent left drawer. ≤900px the same drawer slides from the right.

Canvas New file

File browser

Desktop keeps the drawer open; mobile uses a right slide-over.

.nav-announce-stack

Announcement Stack Nav

Promo strip above a sticky main bar. Burger ≤768px on the main tier.

Spring launch — 20% off Pro plans. Learn more
Bloom Start free

Marketing site

Announcement + sticky navigation stack.