10+ Navbar Components - Vanilla CSS

A navbar, short for navigation bar, is a user interface element used on websites to provide easy access to different pages or sections of the website. It typically appears at the top of the webpage and contains links, buttons, or dropdown menus for navigation purposes. Navbars help users quickly find the information they need and navigate through the website efficiently. In this collection, you'll find various designs for navbar components that you can easily incorporate into your website's design. Whether you prefer a basic navbar or a more visually appealing style, these components are designed to enhance navigation and provide a seamless browsing experience for your website visitors.

Searchable Navbar

Enhance user experience on your website with a searchable navbar. Learn how to integrate a search functionality into your navbar, allowing users to quickly find the content they need.

Author: Joe

Preview
Code

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css" />

<nav class="navbar">
  <input
    spellcheck="false"
    type="text"
    class="search"
    id="search"
    placeholder="e.g. Nike Trainers"
  />
  <button
    onclick="toggleSearch()"
    type="button"
    class="search-toggle"
  ></button>
  <nav class="navbar-menu">
    <button type="button" class="uil uil-bag active"></button>
    <button type="button" class="uil uil-laptop"></button>
    <button type="button" class="uil uil-envelope"></button>
  </nav>
</nav>

* {
  box-sizing: border-box;
}

body {
  background: #3b3d43;
}

button {
  border: 0;
  padding: 0;
  font-family: inherit;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.navbar {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  height: 72px;
  padding: 0 20px;
  background: #19191c;
  color: #f9f9f9;
}

@media only screen and (min-width: 600px) {
  .navbar {
    justify-content: space-between;
  }
}

.search {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  height: 44px;
  padding-left: 46px;
  font-size: 16px;
  border: 0;
  border-radius: 8px;
  background: #3b3d43;
  color: #f9f9f9;
  font-family: "Poppins";
  visibility: hidden;
  opacity: 0;
  outline: none;
}

.search:focus {
  background: #494c54;
}

body.open .search {
  position: fixed;
  top: 0;
  left: 0;
  opacity: 1;
  border-radius: 0;
  visibility: visible;
  background: #19191c;
  width: 100%;
  height: 72px;
  margin: 0;
  padding-left: 76px;
}

@media only screen and (min-width: 600px) {
  .search {
    opacity: 1;
    visibility: visible;
    flex: 0 0 360px;
    margin-right: auto;
    transition-property: opacity, visibility;
    transition-duration: 0.3s;
  }
}

.search::placeholder {
  color: #939393;
}

.search-toggle {
  position: fixed;
  left: 16px;
  z-index: 2;
  width: 40px;
  height: 40px;
  background-image: url("https://raw.githubusercontent.com/frontend-joe/css-navbars/d296e62eb289784b7ffa22dedc5da7a9c8f471dc/navbar-5/search.svg");
  background-repeat: no-repeat;
  background-position: center;
  transition: 0.3s;
}

body.open .search-toggle {
  background-image: url("https://raw.githubusercontent.com/frontend-joe/css-navbars/d296e62eb289784b7ffa22dedc5da7a9c8f471dc/navbar-5/close.svg");
}

@media only screen and (min-width: 600px) {
  .search-toggle {
    translate: 10px 0;
    scale: 0.65;
    pointer-events: none;
  }
}

.navbar-menu {
  display: flex;
}

.navbar-menu > button {
  position: relative;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  font-size: 28px;
  height: 72px;
  width: 40px;
  opacity: 0.3;
}

.navbar-menu > button.active {
  opacity: 1;
}

const toggleSearch = () => document.body.classList.toggle("open");

Navbar with Dropdown Menu

Elevate user experience on your website with a navbar featuring dropdown menus. Learn how to implement intuitive dropdown navigation to provide users with easy access to additional options or content.

Author: Joe

Preview
Code

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />

<nav class="navbar">
  <button onclick="toggleMenu()" class="burger"></button>
  <button class="button">Home</button>
  <div class="dropdowns">
    <div class="dropdown">
      <button class="button">
        Services
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 15.375L6 9.375L7.075 8.3L12 13.25L16.925 8.325L18 9.4L12 15.375Z" fill="#F9F9F9"/>
          </svg>
      </button>
      <div class="dropdown-menu">
        <button>UX/UI Design</button>
        <button>Web Applications</button>
        <button>SEO Advice</button>
      </div>
    </div>
    <div class="dropdown">
      <button class="button">
        Products
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 15.375L6 9.375L7.075 8.3L12 13.25L16.925 8.325L18 9.4L12 15.375Z" fill="#F9F9F9"/>
          </svg>
      </button>
      <div class="dropdown-menu">
        <button>Learn CSS Ebook</button>
        <button>Security Course</button>
        <button>Masterclass Bundle</button>
      </div>
    </div>
    <div class="dropdown">
      <button class="button">
        Support
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 15.375L6 9.375L7.075 8.3L12 13.25L16.925 8.325L18 9.4L12 15.375Z" fill="#F9F9F9"/>
          </svg>
      </button>
      <div class="dropdown-menu">
        <button>Live Chat</button>
        <button>Send Email</button>
        <button>Request Help</button>
      </div>
    </div>
  </div>
</nav>

body {
  background: #2c2c32;
}

button {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  line-height: 1;
  color: inherit;
  font-family: "Poppins";
  font-size: 20px;
}

@media (width >= 500px) {
  button {
    font-size: 16px;
  }
}

:is(.navbar, .burger, .dropdowns) {
  position: fixed;
  top: 0;
  width: 100%;
}

.navbar {
  z-index: 1;
  left: 0;
  display: flex;
  align-items: stretch;
  height: 72px;
  background: #19191c;
  color: #f9f9f9;
}

.burger {
  z-index: 3;
  right: 0;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  background-image: url("https://raw.githubusercontent.com/frontend-joe/css-navbars/d296e62eb289784b7ffa22dedc5da7a9c8f471dc/navbar-4/menu.svg");
  background-repeat: no-repeat;
  background-position: center;
}

body.open .burger {
  background-image: url("https://raw.githubusercontent.com/frontend-joe/css-navbars/d296e62eb289784b7ffa22dedc5da7a9c8f471dc/navbar-4/close.svg");
}

@media (width >= 500px) {
  .burger {
    display: none;
  }
}

.button {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 24px;
  height: 100%;
  opacity: 0.6;
}

.button > img {
  display: none;
}

@media (width >= 500px) {
  .button {
    padding: 0 10px 0 24px;
  }

  .button > img {
    display: block;
  }
}

@media (width >= 500px) {
  .dropdown:hover .button {
    opacity: 1;
  }
}

.dropdowns {
  left: -9999px;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #0d0d0e;
  opacity: 0;
  visibility: hidden;
  transition-property: opacity, visibility;
  transition-duration: 0.3s;
}

@media (width < 500px) {
  body.open .dropdowns {
    opacity: 1;
    visibility: visible;
    left: 0;
  }
}

@media (width >= 500px) {
  .dropdowns {
    position: static;
    flex-direction: row;
    justify-content: flex-start;
    background: transparent;
    opacity: 1;
    visibility: visible;
  }
}

.dropdown {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.dropdown-menu {
  display: grid;
  margin-bottom: 28px;
}

@media (width >= 500px) {
  .dropdown {
    height: 100%;
    flex-direction: row;
  }

  .dropdown-menu {
    position: absolute;
    top: 72px;
    left: 0;
    width: 180px;
    padding: 6px 24px 10px;
    margin-bottom: 0;
    place-items: start;
    background: #19191c;
    opacity: 0;
    visibility: hidden;
    translate: 0 24px;
    transition: 0.3s;
  }

  .dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
  }
}

.dropdown-menu > button {
  color: #f9f9f9;
  opacity: 1;
  height: 40px;
}

@media (width >= 500px) {
  .dropdown-menu > button {
    opacity: 0.6;
  }

  .dropdown:hover .button {
    opacity: 1;
  }
}

.dropdown-menu > button:hover {
  opacity: 1;
}

const toggleMenu = () => document.body.classList.toggle("open");

Blurred Background Navbar with Search

Elevate your website's aesthetics with a sleek navbar featuring a blurred background and search functionality.

Author: Joe

Preview
Code

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />

<div class="background"></div>
    <nav class="navbar">
      <img class="navbar-logo" src="https://raw.githubusercontent.com/frontend-joe/css-navbars/main/navbar-3/assets/logo.png" />
      <input type="text" placeholder="Search" class="navbar-search" />
    </nav>
    <button class="navbar-burger" onclick="toggleMenu()"></button>
    <nav class="menu">
      <a href="#" style="animation-delay: 0.1s">Home</a>
      <a href="#" style="animation-delay: 0.2s">About</a>
      <a href="#" style="animation-delay: 0.3s">Services</a>
      <a href="#" style="animation-delay: 0.4s">Products</a>
      <a href="#" style="animation-delay: 0.5s">Contact</a>
    </nav>

* {
  box-sizing: border-box;
}

button {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.navbar,
.navbar-burger,
.menu,
.background {
  position: fixed;
}

.background {
  z-index: 1;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  background-image: url("https://raw.githubusercontent.com/frontend-joe/css-navbars/main/navbar-3/assets/bg.jpeg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  transition: 0.5s;
}

body.open .background {
  filter: blur(20px);
}

.navbar {
  z-index: 1;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 72px;
  padding-left: 20px;
  padding-right: 72px;
  background: #19191c;
  color: #f9f9f9;
}

.navbar > button {
  font-size: 28px;
}

.navbar-logo {
  height: 25px;
}

.navbar-burger {
  z-index: 3;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  background-image: url("https://raw.githubusercontent.com/frontend-joe/css-navbars/main/navbar-3/assets/menu.svg");
  background-repeat: no-repeat;
  background-position: center;
}

body.open .navbar-burger {
  background-image: url("https://raw.githubusercontent.com/frontend-joe/css-navbars/main/navbar-3/assets/close.svg");
}

.navbar-search {
  border: 0;
  height: 40px;
  background: #2f3339 url("https://raw.githubusercontent.com/frontend-joe/css-navbars/main/navbar-3/assets/search.svg");
  background-repeat: no-repeat;
  background-position: 10px 50%;
  border: 0;
  border-radius: 6px;
  padding-left: 36px;
  width: 180px;
  font-size: 16px;
  font-family: "Poppins";
}

.navbar-search::placeholder {
  color: #a7a7a7;
}

.menu {
  z-index: 2;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 32px;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  opacity: 0;
  visibility: hidden;
  transition: 0.5s;
}

body.open .menu {
  opacity: 1;
  visibility: visible;
}

.menu > a {
  color: #f9f9f9;
  font-size: 32px;
  font-family: "Poppins";
  text-decoration: none;
}

body.open .menu > a {
  animation: appear 0.3s both;
}

@keyframes appear {
  0% {
    opacity: 0;
    translate: 0 50px;
  }
  100% {
    opacity: 1;
  }
}

const toggleMenu = () => {
    document.body.classList.toggle("open");
};

Default Navbar with Toggle Menu

Enhance website navigation with a default navbar featuring a toggle menu. Learn how to create a user-friendly navigation bar that collapses into a toggle menu for improved usability on smaller screens

Author: Joe

Preview
Code

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

<nav class="navbar">
  <div class="navbar-overlay" onclick="toggleMenuOpen()"></div>

  <button type="button" class="navbar-burger" onclick="toggleMenuOpen()">
    <span class="material-icons">menu</span>
  </button>
  <h1 class="navbar-title">Awards</h1>
  <nav class="navbar-menu">
    <button type="button">Skills</button>
    <button type="button" class="active">Awards</button>
    <button type="button">Projects</button>
  </nav>
</nav>

* {
  box-sizing: border-box;
}

body {
  background: #3b3d43;
}

button {
  border: 0;
  padding: 0;
  font-family: inherit;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.navbar {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 64px;
  background: #19191c;
  color: #f9f9f9;
  font-family: "Poppins";
  box-sizing: border-box;
}

@media only screen and (min-width: 600px) {
  .navbar {
    justify-content: space-between;
    padding: 0 0 0 16px;
  }
}

.navbar-overlay {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  visibility: hidden;
  opacity: 0;
  transition: 0.3s;
}

body.open .navbar-overlay {
  visibility: visible;
  opacity: 1;
}

@media only screen and (min-width: 600px) {
  .navbar-overlay {
    display: none;
  }
}

.navbar-burger {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  padding: 0;
}

@media only screen and (min-width: 600px) {
  .navbar-burger {
    display: none;
  }
}

.navbar-title {
  margin: 0;
  font-size: 16px;
}

.navbar-menu {
  position: fixed;
  z-index: 3;
  top: 0;
  left: 0;
  translate: -100% 0;
  width: 270px;
  height: 100%;
  padding: 20px;
  display: flex;
  gap: 8px;
  flex-direction: column;
  align-items: flex-start;
  background: #000000;
  visibility: hidden;
  transition: translate 0.3s;
}

body.open .navbar-menu {
  translate: 0 0;
  visibility: visible;
}

@media only screen and (min-width: 600px) {
  .navbar-menu {
    position: static;
    translate: 0 0;
    width: auto;
    background: transparent;
    flex-direction: row;
    visibility: visible;
  }
}

.navbar-menu > button {
  color: rgba(255, 255, 255, 0.5);
  background: transparent;
  padding: 0 8px;
}

.navbar-menu > button.active {
  color: inherit;
}

const toggleMenuOpen = () => document.body.classList.toggle("open");

Responsive Navbar with Hamburger Menu

Optimize your website's navigation for all devices with a responsive navbar featuring a convenient hamburger menu. Learn how to create an intuitive navigation system using HTML, CSS, and JavaScript.

Author: Admin

Preview
Code

<nav class="navbar">
  <span class="navbar-toggle" id="navbar-toggle">
          <i class="fas fa-bars"></i>
      </span>
  <a href="#" class="logo">Company Logo</a>
  <ul class="main-nav" id="menu">
    <li>
      <a href="#" class="nav-links">Home</a>
    </li>
    <li>
      <a href="#" class="nav-links">About Us</a>
    </li>
    <li>
      <a href="#" class="nav-links">Products</a>
    </li>
    <li>
      <a href="#" class="nav-links">Blog</a>
    </li>
    <li>
      <a href="#" class="nav-links">Contact Us</a>
    </li>
  </ul>
</nav>

<div style="padding: 20px;">
  <h2>Content Here</h2>
  <p>This is just some content to demonstrate the layout with a navbar.</p>
</div>

.navbar {
  font-size: 18px;
  background-color: #333;
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding-bottom: 10px;
}

.main-nav {
  list-style-type: none;
  display: none;
}

.nav-links,
.logo {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.7);
}

.main-nav li {
  text-align: center;
  margin: 15px auto;
}

.logo {
  display: inline-block;
  font-size: 22px;
  margin-top: 10px;
  margin-left: 20px;
}

.navbar-toggle {
  position: absolute;
  top: 10px;
  right: 20px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.8);
  font-size: 24px;
}

.active {
  display: block;
}

@media screen and (min-width: 768px) {
  .navbar {
    display: flex;
    justify-content: space-between;
    padding-bottom: 0;
    height: 70px;
    align-items: center;
  }

  .main-nav {
    display: flex;
    margin-right: 30px;
    flex-direction: row;
    justify-content: flex-end;
  }

  .main-nav li {
    margin: 0;
  }

  .nav-links {
    margin-left: 40px;
  }

  .logo {
    margin-top: 0;
  }

  .navbar-toggle {
    display: none;
  }

  .logo:hover,
  .nav-links:hover {
    color: rgba(255, 255, 255, 1);
  }
}

let mainNav = document.getElementById("menu");
let navBarToggle = document.getElementById("navbar-toggle");

navBarToggle.addEventListener("click", function() {
  mainNav.classList.toggle("active");
});