Headers · DESIGN EDITION
Folio editorial header
A large editorial masthead with a warm paper palette, compact utility row and responsive section navigation.
Small vanilla JavaScript enhancement · MIT codeFree HTML header and navigation snippets
Explore responsive website headers with mobile navigation, open HTML/CSS code and standalone Astro components. Choose a layout and preview it before downloading.
- HTML + Astro components
- Open code and individual downloads
- MIT code · scoped styles
6 designs
Headers · HTML + ASTRO
Studio line header
A slim, typography-led studio header with an inline project link and a restrained underline navigation.
Small vanilla JavaScript enhancement · MIT code
Headers · HTML + ASTRO
Local services header
A two-level business header with contact details above a clear service navigation and appointment link.
Small vanilla JavaScript enhancement · MIT code
Headers · HTML + ASTRO
Restaurant wordmark header
A centered serif restaurant wordmark with a dedicated booking link and a separate menu row.
Small vanilla JavaScript enhancement · MIT code
Headers · HTML + ASTRO
Shop category header
A shop header with an announcement strip, brand row and product-category navigation.
Small vanilla JavaScript enhancement · MIT code
Headers · HTML + ASTRO
Editorial masthead header
A newspaper-style masthead with an issue line, strong publication name and section navigation.
Small vanilla JavaScript enhancement · MIT codeCHOOSING A SECTION
Using these headers
A header needs to establish the site identity and make the next page easy to find. These designs cover a studio, local services, a restaurant, a shop and an editorial publication. Each has its own hierarchy and responsive navigation, so choose by the content you actually need to show. The code uses semantic links, a native mobile-menu button and scoped CSS. You can copy a section into an existing HTML page or import its Astro component into a shared layout.
- Keep the primary navigation short; secondary links can live in the footer.
- Check long brand names and menu labels at mobile widths.
- Replace every destination and set aria-current on the actual active page.