Tab Bar Style Navigation Menu

Preview:

Description:

A sticky horizontal navigation menu inspired by mobile app’s tab bar component.

How to use it:

1. Create a nav list 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 primary CSS styles 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 bottom of the page when running 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 selected 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";
  });
});