17+ Responsive Accessible Header Navbar Templates

Category: Javascript , Menu & Navigation | September 12, 2020
Author:shadeed
Views Total:550 views
Official Page:Go to website
Last Update:September 12, 2020
License:MIT

Preview:

17+ Responsive Accessible Header Navbar Templates

Description:

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">
        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");
  }
});

You Might Be Interested In:


Leave a Reply