Simple Navigation In Navbar Using Vanilla JavaScript

How to make use of it:

1. Create a nav checklist for the tab bar.

<nav>
  <a href="#" class="active">Home</a>
  <a href="#">Search</a>
  <a href="#">Contact</a>
  <a href="#">Blog</a>
  <a href="#">About</a>
</nav>

2. The main CSS types for the tab bar.

/* override variables here */
:root {
  --color-dark: #000;
  --color-dark-gray: #555;
  --color-blue: #1E3A8A;
  --box-shadow : 0 1px 2px rgba(0,0,0,0.2)
}

/* core styles */
nav {
  background-color: white;
  display: flex;
  grid-area: header;
  box-shadow: var(--box-shadow);
}

nav a {
  color: var(--color-dark-gray);
  text-align: center;
  font-size: 2rem;
  padding: 1.2rem 0;
  width: 20%;
  transition: all 0.3s ease;
}

nav a:hover {
  background-color: var(--color-dark);
  color: white;
}

nav a:focus {
  background-color: var(--color-blue);
}

nav .active {
  background-color: var(--color-blue);
  color: white;
}

3. Move the tab bar to the underside of the web page when working on mobile.

@media screen and (max-width: 600px) {
  nav {
    position: fixed;
    bottom: 0;
    width: 100%;
  }
}

4. The JavaScript to set the Active class to the chosen menu item.

// Select all the anchor tags
let links = document.querySelectorAll("a");
// Loop through the link lists
links.forEach((link) => {
  // Add a click event on each link
  link.addEventListener("click", () => {
    // Get current active link and store in currActive variable
    let currActive = document.querySelector(".active");
    // Set next active link to the current active classname
    let nextActive = currActive.className;
    // Set the current active class to none
    currActive.className = nextActive.replace("active", "");
    // Set the clicked link item to active.
    link.className += "active";
  });
});

Tab Bar Style Navigation Menu, navigation menu javascript Plugin/Github

See Demo And Download