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.

Github Inspired Navbar

Bring the functionality of GitHub's navbar to your website effortlessly. Learn how to replicate GitHub's navbar design to improve navigation and user experience on your site.

Author: Joe

Preview
Code

<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css" />

<nav class="navbar">
  <svg onclick="document.body.classList.toggle('open')"
  class="burger" width="50" height="50" fill="#e8e8e8" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path d="M4 6h16v2H4V6Zm0 5h16v2H4v-2Zm0 5h16v2H4v-2Z"></path>
  </svg>
  <svg width="800px" height="800px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none"><path fill="#ffffff" fill-rule="evenodd" d="M8 1C4.133 1 1 4.13 1 7.993c0 3.09 2.006 5.71 4.787 6.635.35.064.478-.152.478-.337 0-.166-.006-.606-.01-1.19-1.947.423-2.357-.937-2.357-.937-.319-.808-.778-1.023-.778-1.023-.635-.434.048-.425.048-.425.703.05 1.073.72 1.073.72.624 1.07 1.638.76 2.037.582.063-.452.244-.76.444-.935-1.554-.176-3.188-.776-3.188-3.456 0-.763.273-1.388.72-1.876-.072-.177-.312-.888.07-1.85 0 0 .586-.189 1.924.716A6.711 6.711 0 018 4.381c.595.003 1.194.08 1.753.236 1.336-.905 1.923-.717 1.923-.717.382.963.142 1.674.07 1.85.448.49.72 1.114.72 1.877 0 2.686-1.638 3.278-3.197 3.45.251.216.475.643.475 1.296 0 .934-.009 1.688-.009 1.918 0 .187.127.404.482.336A6.996 6.996 0 0015 7.993 6.997 6.997 0 008 1z" clip-rule="evenodd"/></svg>
  <div class="menu-items">
    <div class="search">
      <input value="Search or jump to..." />
      <button>/</button>
    </div>
    <div class="menu menu-left">
      <a href="#">Pulls</a>
      <a href="#">Issues</a>
      <a href="#">Explore</a>
    </div>
  </div>
  <div class="menu menu-right">
    <span class="badge"></span>
    <svg width="48" height="48" fill="#e8e8e8" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path d="M12 22a2.98 2.98 0 0 0 2.818-2H9.182A2.98 2.98 0 0 0 12 22Zm7-7.414V10c0-3.217-2.185-5.927-5.145-6.742A1.99 1.99 0 0 0 12 2a1.99 1.99 0 0 0-1.855 1.258C7.185 4.074 5 6.783 5 10v4.586l-1.707 1.707A.996.996 0 0 0 3 17v1a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-1a.996.996 0 0 0-.293-.707L19 14.586Z"></path>
    </svg>
    <svg width="48" height="48" fill="#e8e8e8" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6v-2Z"></path>
    </svg>
    <img src="https://www.frontendcomponent.com/favicon.ico" />
  </div>
</nav>

* {
  box-sizing: border-box;
}

html,
body,
.wrapper {
  height: 100%;
}

body {
  margin: 0;
  background: #0d1117;
  font-family: system-ui, -apple-system, BlinkMacSystemFont;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 60px;
  padding: 0 20px;
  background: #161b22;
}

nav svg {
  width: 30px;
  height: 30px;
}

.burger {
  display: none;
  cursor: pointer;
}

.menu-items,
.menu {
  display: flex;
  gap: 16px;
}

.menu-right {
  position: relative;
  margin-left: auto;
  gap: 6px;
}

.menu-right svg, .menu-right img {
  width: 30px;
  height: 30px;
  padding: 5px;
}

.menu-right .badge {
  position: absolute;
  top: 0;
  left: 14px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #161b22;
  background: linear-gradient(#54a3ff, #006eed);
}

a,
a:is(:visited, :active) {
  color: #ffffff;
  text-decoration: none;
  line-height: 24px;
}

.search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 6px;
  padding-right: 4px;
}

.search input {
  padding: 4px 10px;
  color: #c9d1d9;
  font-size: 13px;
  font-family: inherit;
  border: 0;
  background: transparent;
}

.search button {
  border: inherit;
  border-radius: inherit;
  background: transparent;
  color: #8b949e;
}

@media (width <= 580px) {
  .menu-right img:nth-child(n + 3) {
    display: none;
  }

  .menu-items {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 16px;
    position: absolute;
    top: 60px;
    left: 0;
    padding: 0 20px 20px;
    background: #161b22;
  }

  .menu-left {
    flex-direction: column;
    gap: 12px;
  }

  .menu-left a {
    border-bottom: 1px solid #30363d;
    padding-bottom: 10px;
  }

  .menu-right {
    margin-left: 0;
  }

  .burger {
    display: block;
  }
}

body.open .menu-items {
  display: flex;
}

```
No need of JavaScript
```

Facebook Inspired Navbar

Emulate the navigation experience of Facebook with a Facebook-inspired navbar on your website. Learn how to recreate Facebook's navbar design to enhance user experience and streamline navigation.

Author: Joe

Preview
Code

<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css" />

<nav class="navbar">
  <span class="navbar-badge">20+</span>
  <div class="navbar-end">
    <svg class="navbar-logo" width="800px" height="800px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none"><path fill="#1877F2" d="M15 8a7 7 0 00-7-7 7 7 0 00-1.094 13.915v-4.892H5.13V8h1.777V6.458c0-1.754 1.045-2.724 2.644-2.724.766 0 1.567.137 1.567.137v1.723h-.883c-.87 0-1.14.54-1.14 1.093V8h1.941l-.31 2.023H9.094v4.892A7.001 7.001 0 0015 8z"/><path fill="#ffffff" d="M10.725 10.023L11.035 8H9.094V6.687c0-.553.27-1.093 1.14-1.093h.883V3.87s-.801-.137-1.567-.137c-1.6 0-2.644.97-2.644 2.724V8H5.13v2.023h1.777v4.892a7.037 7.037 0 002.188 0v-4.892h1.63z"/></svg>
    <button class="icon-button">
      <i class="uil uil-search"></i>
    </button>
  </div>
  <div class="navbar-center">
    <button class="active">
      <i class="uil uil-estate"></i>
    </button>
    <button>
      <i class="uil uil-play-circle"></i>
    </button>
    <button>
      <i class="uil uil-store"></i>
    </button>
    <button>
      <i class="uil uil-users-alt"></i>
    </button>
    <button>
      <i class="uil uil-bars"></i>
    </button>
  </div>
  <div class="navbar-end">
    <button class="icon-button">
      <i class="uil uil-plus"></i>
    </button>
    <button class="icon-button">
      <i class="uil uil-facebook-messenger-alt"></i>
    </button>
    <button class="icon-button">
      <i class="uil uil-bell"></i>
    </button>
    <img class="navbar-avatar" src="https://www.frontendcomponent.com/favicon.ico" />
  </div>
</nav>

* {
  box-sizing: border-box;
}

html,
body,
.wrapper {
  height: 100%;
}

body {
  margin: 0;
  background: #f0f2f5;
  font-family: system-ui, -apple-system, BlinkMacSystemFont;
}

button {
  display: grid;
  place-items: center;
  background: transparent;
  color: #606770;
  border: 0;
}

button > i {
  font-size: 20px;
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  width: 100%;
  padding: 0 20px;
  border-bottom: 1px solid #e8e8e8;
  background: #ffffff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

.navbar-logo,
.navbar-avatar {
  width: 40px;
  height: 40px;
}

.navbar-end {
  display: flex;
  gap: 6px;
  flex: 0 0 178px;
}

.icon-button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f0f2f5;
}

.navbar-badge {
  position: absolute;
  z-index: 1;
  top: 8px;
  right: 54px;
  background: #e41e3f;
  color: #f9f9f9;
  font-size: 12px;
  padding: 1px 4px;
  border-radius: 10px;
  transition: 0.3s;
}

.navbar-center {
  display: flex;
  flex: 1 1 auto;
  padding: 0 10px;
}

.navbar-center > button {
  flex: 1 1 auto;
  height: 72px;
  padding-top: 4px;
  border-bottom: 4px solid transparent;
}

.navbar-center > button.active {
  border-bottom-color: #1a74e5;
}

.navbar-center > button.active > i {
  color: #1a74e5;
}

.navbar-center > button > i {
  font-size: 24px;
}

.navbar .navbar-end:last-child > button > i {
  color: #050505;
}

@media (width <= 600px) {
  .navbar-end {
    flex: 0 0 auto;
  }

  .navbar-center > button {
    display: none;
  }

  .navbar-center > button:last-child {
    display: block;
    position: absolute;
    left: 110px;
    top: 50%;
    translate: 0 -50%;
  }
}

@media (width <= 400px) {
  .navbar .navbar-end:last-child > button:nth-child(n + 2) {
    display: none;
  }

  .navbar-badge {
    right: 10px;
  }
}

```
No need of JavaScript
```

Bottom Navigation Bar

Enhance user experience on your website with a bottom navigation bar. Learn how to create a user-friendly navigation system placed at the bottom of the screen for easy access and improved usability.

Author: Joe

Preview
Code

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

<nav class="navbar">
  <h1>Page Title</h1>
  <div class="tabs">
    <input id="tab-1" type="radio" name="group" />
    <input id="tab-2" type="radio" name="group" />
    <input id="tab-3" type="radio" name="group" />
    <input id="tab-4" type="radio" name="group" />

    <div class="buttons">
      <label class="material-symbols-outlined" for="tab-1"> home </label>
      <label class="material-symbols-outlined" for="tab-2"> notifications </label>
      <label class="material-symbols-outlined" for="tab-3">
        favorite
      </label>
      <label class="material-symbols-outlined" for="tab-4">
        settings
      </label>
      <div class="underline"></div>
    </div>
</nav>

* {
  box-sizing: border-box;
}

:root {
  --color-primary: #2ebdff;
}

html,
body,
.wrapper {
  height: 100%;
}

body {
  margin: 0;
  font-family: "Euclid Circular A";
  background: #f9f9f9;
  color: #f9f9f9;
}

.navbar {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  background: #17181a;
  width: 100%;
}

.navbar h1 {
  display: none;
  flex: 2 1 auto;
  font-weight: 500;
  font-size: 16px;
  margin: 0 0 0 16px;
}

@media (width >= 440px) {
  .navbar {
    top: 0;
    bottom: auto;
  }

  .tabs {
    scale: 0.8;
    width: 200px;
  }

  .navbar h1 {
    display: block;
  }
}

.tabs {
  flex: 1 1 auto;
}

.tabs > input {
  display: none;
}

h2 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 400;
}

label {
  position: relative;
  z-index: 2;
  padding: 20px;
  font-size: 15px;
  flex: 1 1 auto;
  min-width: 58px;
  opacity: 0.35;
  cursor: pointer;
  text-align: center;
  transition: 0.3s;
}

.buttons {
  position: relative;
  display: flex;
}

.underline {
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: -3px;
  width: 25%;
  display: grid;
  place-items: center;
  transition: 0.3s;
}

.underline::after {
  content: "";
  display: block;
  translate: 0 -15px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary);
}

.tabs input:nth-child(1):checked ~ .buttons .underline {
  translate: 0 0;
}

.tabs input:nth-child(2):checked ~ .buttons .underline {
  translate: 100% 0;
}

.tabs input:nth-child(3):checked ~ .buttons .underline {
  translate: 200% 0;
}

.tabs input:nth-child(4):checked ~ .buttons .underline {
  translate: 300% 0;
}

.tabs input:nth-child(1):checked ~ .buttons label:nth-child(1),
.tabs input:nth-child(2):checked ~ .buttons label:nth-child(2),
.tabs input:nth-child(3):checked ~ .buttons label:nth-child(3),
.tabs input:nth-child(4):checked ~ .buttons label:nth-child(4) {
  opacity: 1;
  color: black;
}

```
No need of JavaScript
```

Youtube Inspired Navbar

Embrace the sleekness of YouTube's navbar design on your website effortlessly. Learn how to replicate YouTube's navbar to enhance your site's appearance and user experience.

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=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

<nav class="navbar">
  <button class="burger material-symbols-outlined">menu</button>

  <div class="logo">
    <img src="https://raw.githubusercontent.com/frontend-joe/css-navbars/d296e62eb289784b7ffa22dedc5da7a9c8f471dc/navbar-7/logo.svg" />
  </div>
  <div class="center">
    <div class="search">
      <input
        spellcheck="false"
        type="text"
        class="search"
        id="search"
        placeholder="Search"
      />
      <button class="material-symbols-outlined">search</button>
    </div>
    <button class="material-symbols-outlined">mic</button>
  </div>
  <nav>
    <button class="material-symbols-outlined">search</button>
    <button class="material-symbols-outlined">mic</button>
    <button class="material-symbols-outlined">video_call</button>
    <button class="material-symbols-outlined">
      <span class="badge">9+</span>notifications
    </button>
    <img src="https://www.frontendcomponent.com/favicon.ico" />
  </nav>
</nav>

* {
  box-sizing: border-box;
}

body {
  background: #202124;
  font-family: Roboto;
}

button {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 72px;
  border: 0;
  padding: 0;
  font-family: inherit;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
}

.badge {
  position: absolute;
  top: 20px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 12px;
  border-radius: 6px;
  background: red;
  font-size: 8px;
  font-weight: 500;
  font-family: Roboto;
}

.burger {
  width: 72px;
}

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

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 88px;
  padding-right: 10px;
}

@media (width >= 500px) {
  .logo {
    margin-bottom: 0;
  }
}

.logo img {
  height: 20px;
}

.center {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 auto;
  color: #888989;
}

.center button {
  display: none;
  background: #1e1e1e;
  height: 40px;
  border-radius: 50%;
  font-size: 20px;
}

@media (width >= 500px) {
  .center button {
    display: block;
  }
}

.search {
  position: relative;
  display: none;
}

@media (width >= 500px) {
  .search {
    display: block;
  }
}

.search button {
  position: absolute;
  top: 50%;
  right: 1px;
  translate: 0 -50%;
  z-index: 1;
  font-size: 20px;
  width: 60px;
  height: 42px;
  border-radius: 0;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  background: #222222;
}

.search input {
  flex: 1 1 auto;
  height: 44px;
  width: 25vw;
  padding-left: 16px;
  padding-right: 60px;
  font-size: 16px;
  border: 1px solid #303030;
  border-radius: 22px;
  background: #121212;
  color: inherit;
  font-family: inherit;
  font-weight: 400;
  outline: none;
}

@media (width >= 650px) {
  .search input {
    width: 240px;
  }
}

.navbar nav {
  display: flex;
  align-items: center;
  padding-right: 20px;
}

.navbar nav img {
  flex: 0 32px;
  width: 32px;
  height: 32px;
  margin-left: 8px;
}

@media (width >= 500px) {
  .navbar nav button:is(:nth-child(1), :nth-child(2)) {
    display: none;
  }
}

@media (width < 400px) {
  .navbar nav button:is(:nth-child(2), :nth-child(4)) {
    display: none;
  }
}

```
No need of JavaScript
```

Gmail Inspired Navbar

Bring the efficiency of Gmail's navigation to your website with a Gmail-inspired navbar. Learn how to emulate Gmail's navbar design to improve navigation efficiency on your site.

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://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

<button onclick="toggleMenu()" class="burger material-symbols-outlined">
  menu
</button>
<nav class="navbar">
  <div class="logo">
    <img src="https://raw.githubusercontent.com/frontend-joe/css-navbars/d296e62eb289784b7ffa22dedc5da7a9c8f471dc/navbar-6/logo.svg" />
    <span>Gmail</span>
  </div>
  <div class="search">
    <span class="material-symbols-outlined"> search </span>
    <input
      spellcheck="false"
      type="text"
      class="search"
      id="search"
      placeholder="Search mail"
    />
  </div>
  <nav>
    <button class="material-symbols-outlined">help</button>
    <button class="material-symbols-outlined">settings</button>
    <button class="material-symbols-outlined">apps</button>
    <img src="https://www.frontendcomponent.com/favicon.ico" />
  </nav>
</nav>

* {
  box-sizing: border-box;
}

body {
  background: #e6edf2;
  font-family: "Poppins";
}

button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 72px;
  border: 0;
  padding: 0;
  font-family: inherit;
  background: transparent;
  color: #585c62;
  cursor: pointer;
}

.burger {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  width: 72px;
}

.navbar {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  height: 100%;
  padding: 20px 24px 0;
  translate: -100% 0;
  display: flex;
  gap: 10px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: #ffffff;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transition-property: translate, opacity, visibility;
  transition-duration: 0.5s;
}

body.open .navbar {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}

@media (width >= 500px) {
  .navbar {
    translate: 0 0;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    width: 100%;
    height: 72px;
    padding: 0 0 0 72px;
  }
}

@media (width >= 600px) {
  .navbar {
    opacity: 1;
    visibility: visible;
  }
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 108px;
  padding-right: 10px;
  margin-bottom: 10px;
}

@media (width >= 500px) {
  .logo {
    margin-bottom: 0;
  }
}

.logo img {
  width: 32px;
}

.logo span {
  font-size: 18px;
  color: #606468;
}

.search {
  margin: 0 auto;
  position: relative;
  color: #888989;
}

@media (width >= 500px) {
  .search {
    flex: 1 1 auto;
  }
}

@media (width >= 550px) {
  .search {
    flex: 0 0 auto;
  }
}

.search span {
  position: absolute;
  top: 50%;
  left: 16px;
  translate: 0 -50%;
  z-index: 1;
  font-size: 20px;
  color: inherit;
}

.search input {
  width: 100%;
  height: 44px;
  padding-left: 46px;
  font-size: 16px;
  border: 0;
  border-radius: 8px;
  background: #eff1f2;
  color: inherit;
  font-family: inherit;
  outline: none;
}

@media (width >= 650px) {
  .search input {
    width: 280px;
  }
}

.navbar nav {
  display: flex;
  align-items: center;
  padding-right: 20px;
}

.navbar nav img {
  flex: 0 32px;
  width: 32px;
  height: 32px;
  margin-left: 8px;
}

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