Headers – 22 Free Website Header Templates
Headers is a pack of 22 website header and navigation templates, each a single self-contained HTML file with the CSS inline. Marketing bars, application headers, mastheads, mega menus, storefront bars and side navigation — most are pure CSS, and the four that need behaviour use a few lines of vanilla JavaScript rather than a library.
At a glance
- 22 designs, one folder each, single
index.htmlper design - Every demo includes page content, so the header is shown in context
- Checked at 380px for horizontal overflow — five needed a media query before shipping
- Real
<header>and<nav>,aria-currenton the active link, a name on every icon-only control - No framework, no build step, no dependencies
What is in the pack
Ten marketing and brand headers — classic SaaS, transparent-to-solid, mega menu, centred masthead, dark in-app, double-deck service, hamburger drawer, floating glass, storefront and neobrutalist. Twelve more added in August: announcement bar, search-first, split navigation, minimal text, dual CTA, vertical side rail, shrinking sticky, breadcrumb, locale switcher, application bar, editorial masthead and reading progress.
How to use
Open the design you want, copy the <header> markup and its rules out of the <style> block, and paste both into your project. Each design is self-contained — nothing depends on the rest of the file or on the other 21.
FAQ
Are these header templates free?
Yes — free for personal and commercial projects, including client work.
Do they need a framework?
No. They are plain HTML and CSS on their own class names, so they drop into a Bootstrap, Tailwind or vanilla project without conflicting with anything.
