17+ Responsive Accessible Header Navbar Templates

Category: Javascript , Menu & Navigation | November 1, 2020
Author: shadeed
Views Total: 27,423 views
Official Page: Go to website
Last Update: November 1, 2020
License: MIT


17+ Responsive Accessible Header Navbar Templates


A set of 17+ accessible, fully responsive, and mobile-friendly header navbar templates for modern web app design.

Built using CSS flexbox and easy-to-customize via SCSS.

Live Demos:

How to use it:

1. Create the HTML for the header navbar.

<header class="site-header">
  <div class="wrapper site-header__wrapper">
    <a href="#" class="brand">Brand</a>
    <nav class="nav">
      <button class="nav__toggle" aria-expanded="false" type="button">
      <ul class="nav__wrapper">
        <li class="nav__item"><a href="#">Home</a></li>
        <li class="nav__item"><a href="#">About</a></li>
        <li class="nav__item"><a href="#">Services</a></li>
        <li class="nav__item"><a href="#">Hire us</a></li>
        <li class="nav__item"><a href="#">Contact</a></li>

2. Load the main stylesheet in the document.

<link rel="stylesheet" href="styles/header-1.css" />
<link rel="stylesheet" href="styles/header-2.css" />

3. Enable the toggle button to reveal the nav menu on mobile devices.

let navToggle = document.querySelector(".nav__toggle");
let navWrapper = document.querySelector(".nav__wrapper");
navToggle.addEventListener("click", function () {
  if (navWrapper.classList.contains("active")) {
    this.setAttribute("aria-expanded", "false");
    this.setAttribute("aria-label", "menu");
  } else {
    this.setAttribute("aria-label", "close menu");
    this.setAttribute("aria-expanded", "true");



  • Enhance header links on mobile

You Might Be Interested In:

Leave a Reply