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:

• Navbar 1
• Navbar 2
• Navbar 3
• Navbar 4
• Navbar 5
• Navbar 6
• Navbar 7
• Navbar 8
• Navbar 9
• Navbar 10
• Navbar 11
• Navbar 12
• Navbar 13
• Navbar 14
• Navbar 15
• Navbar 16
• Navbar 17

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">
        menu
      </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>
      </ul>
    </nav>
  </div>
</header>

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");
    navWrapper.classList.remove("active");
  } else {
    navWrapper.classList.add("active");
    this.setAttribute("aria-label", "close menu");
    this.setAttribute("aria-expanded", "true");
  }
});

Changelog:

11/01/2020

• Enhance header links on mobile