Header 01 · Classic
Logo left, links centred, two actions right. Fits almost any business or SaaS site.
Headers 30
Header 02 · Centred logo
Logo in the middle with links split on both sides. Great for restaurants, fashion and studios.
Header 03 · Announcement bar
A dismissable promo strip above a clean nav. Use it for launches, sales and shipping offers.
Header 04 · Floating pill (dark)
A dark glass navigation that floats over a hero image or video. Modern and eye-catching.
Header 05 · Mega menu
A product dropdown with icons, descriptions and a featured card. Built for SaaS and larger sites.
Header 06 · Shop with search
Store header with a big search, account, wishlist and cart, plus a category row and free-delivery note.
Header 07 · Minimal + full-screen menu
Just a logo and a menu button. The menu opens full screen with big links. Ideal for portfolios and agencies.
Header 08 · Business with contact bar
A top bar with phone, email, hours and socials above the main nav. Made for local businesses, clinics and trades.
Header 09 · Bold gradient SaaS
A colourful header for launch pages, with a "New" badge link and strong call-to-action buttons.
Header 10 · Docs & developer
A header for documentation and developer sites: version picker, search with a ⌘K hint and a GitHub stars button.
Header 11 · Sliding pill navigation
Logo left, a pill-shaped nav in the middle with an indicator that glides to the hovered or current link, and icon actions on the right.
Header 12 · Magazine masthead
A two-tier editorial header: date and weather, a large serif masthead with subscribe and sign-in, then a section bar that scrolls sideways on small screens.
Header 13 · Transparent header on scroll
A see-through header over a full-bleed hero that turns solid with a shadow and dark text once you scroll, with a centred CTA and mobile menu.
Header 14 · Vertical side rail
A fixed left rail for portfolios and studios: logo, icon-and-label links with a current marker, socials and availability at the bottom. Becomes a top bar on phones.
Header 15 · Command palette header
An app header with a search bar that opens a command palette (also with Ctrl/⌘ K): grouped results, filtering, arrow-key navigation and shortcuts.
Header 16 · Restaurant header
A warm restaurant header: links split either side of a centred logo, live “Open now” status from opening hours, phone and a Book a table button; mobile drawer with hours.
Header 17 · Global store header
A three-row shop header: utility bar with delivery promise and a region & currency picker, main row with search, account, wishlist and bag count, and a category chip scroller.
Header 18 · Hide-on-scroll article header
A slim blog header that hides when you scroll down and slides back when you scroll up, with a reading progress bar, article title and share actions.
Header 19 · App-style tab bar
A responsive app navigation: a top bar with title and actions on every size, plus a bottom tab bar with a raised create button on phones and tablets that turns into top links on desktop.
Header 20 · Conference header with countdown
An event header: logo with dates and city, a live countdown to doors opening, agenda links and a Get tickets button with price; collapses to a compact bar on phones.
Header 21 · Expanding search header
A bookshop header where the search icon expands into a full search field across the nav, with suggested searches; Escape or the close button collapses it again.
Header 22 · Public service header
A council-style service header: skip link, crest and service name, a phase banner asking for feedback, a service navigation row and a sign-out link. Plain, high-contrast and accessible.
Header 23 · Brutalist streetwear header
A loud streetwear header: thick black borders, a scrolling drop ticker inside the header, boxed nav tiles that invert on hover and a chunky bag counter.
Header 24 · Header with mini player
A record label header with a built-in mini player pill in the centre: play/pause, track title, a progress bar and next track. The rest of the site stays navigable while music plays.
Header 25 · Checkout header with steps
A focused checkout header: logo, a step indicator (Basket, Delivery, Payment, Confirm) with completed ticks, secure checkout badge and a help phone number, no distracting navigation.
Header 26 · Hotel header with booking bar
A boutique hotel header that carries a compact booking bar (dates, guests, Check rates) inside it on desktop; on phones the bar collapses into a single Book button that opens a booking sheet.
Header 27 · Community header with live badge
A community church header: a top strip showing the next gathering with a live-stream badge that turns on during the service, plus nav, Plan a visit and Give buttons.
Header 28 · Playful kids header
A cheerful toy-shop header with a wavy bottom edge, colourful bubble links with little icons, a friendly mascot logo and an age filter. Big tap targets for parents on the go.
Header 29 · Delivery app header
A food-delivery header: a postcode location picker, a Delivery / Collection switch with estimated times, a big search field and a basket with total. On phones it becomes two compact rows.
Header 30 · Corporate group header
A group-company header: a slim group bar with a brand switcher dropdown, investor and careers links and a stock-style ticker, above the main corporate nav with a sustainability highlight.