Live previewFree HTML Header & Navbar Templates
Website headers with working mobile menus, dropdowns, search and sticky behaviour. Every design is one HTML file in plain HTML and CSS, so you can drop it into any site.
Also for page builders: Elementor headers & navbars · Bricks headers & navbars
- 30 designs
- 1 zip no sign-up
- HTML & CSS no frameworks
- Free for commercial use
How it works: all 30 designs come in one free pack. Preview any design, then download the pack: you get every design as a zip, one HTML file each.
HTML Header Templates
30 designs · Free · HTML & CSS
Live preview
Live previewCentred logo
Live previewAnnouncement bar
Live previewFloating pill dark
Live previewMega menu
Live previewShop with search
Live previewMinimal full screen menu
Live previewBusiness with contact bar
Live previewBold gradient SaaS
Live previewDocs developer
Live previewSliding pill navigation
Live previewMagazine masthead
Live previewTransparent header on scroll
Live previewVertical side rail
Live previewCommand palette header
Live previewRestaurant header
Live previewGlobal store header
Live previewHide on scroll article header
Live previewApp style tab bar
Live previewConference header with countdown
Live previewExpanding search header
Live previewPublic service header
Live previewBrutalist streetwear header
Live previewHeader with mini player
Live previewCheckout header with steps
Live previewHotel header with booking bar
Live previewCommunity header with live badge
Live previewPlayful kids header
Live previewDelivery app header
Live previewCorporate group header
Page builders
Headers & navbars for Elementor and Bricks
Elementor
Bricks
How it works
From download to live in three steps
- Pick a designOpen the live preview, check it on desktop, tablet and phone, and download its free pack.
- Copy it inPaste the design's HTML into your page and its CSS into your stylesheet. Copy the small script too if it has one.
- Make it yoursChange the colour and font variables at the top of the CSS, then swap in your own text and links.
FAQ
Questions about these templates
Are these headers & navbars templates really free?
Yes. Every headers & navbars design here is free for personal and commercial projects, including client work. Download any pack instantly, with no sign-up. The only thing you can't do is resell the templates themselves.
Do I need Bootstrap, Tailwind or a build step?
No. Each design is a single file of plain HTML and CSS, with a few lines of vanilla JavaScript only where something is interactive. It works in any website, CMS or framework.
How do I change the colours and fonts?
Every file starts with a short list of CSS variables (brand colour, text colour, radius, font). Change them and the whole design follows.
Are they responsive and accessible?
Yes. Every design is tested from 390px phones to 1440px desktops, with keyboard support, visible focus states and sensible ARIA where it matters.

