3+ Navigation Tab Components - Vanilla CSS

Navigation tabs are user interface elements used on websites to organize content into different sections or categories. These tabs typically appear as clickable labels or buttons at the top or side of a webpage, allowing users to switch between different sections of content with ease. In this collection, you'll find various designs for navigation tab components that you can easily incorporate into your website's design. Whether you prefer basic tab navigation or more visually appealing styles, these components are designed to enhance user navigation and provide a seamless browsing experience for your website visitors.

Rating List with Tab Navigation

Organize and compare ratings effortlessly with tab navigation. Learn how to implement a rating list with tab navigation, allowing users to explore and compare different rating categories conveniently.

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" />


<article class="card">
  <header>
    <div>
      <h2>New Members</h2>
      <h4>More than 400 new members</h4>
    </div>
    <div class="buttons">
      <button class="active" onclick="selectList(this, 0)">Month</button>
      <button onclick="selectList(this, 1)">Week</button>
      <button onclick="selectList(this, 2)">Day</button>
    </div>
  </header>
  <div class="tables">
    <table class="active">
      <tbody class="active">
        <tr>
          <td>
            <img class="avatar" src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/001-boy.svg" />
          </td>
          <td>
            <h3>Jeff Davies</h3>
            <h4>Art Director</h4>
          </td>
          <td>
            <h4>Rating</h4>
            <div class="stars">
              <img src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/star-1.svg" />
              <img src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/star-0.svg" />
              <img src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/star-0.svg" />
              <img src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/star-0.svg" />
              <img src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/star-0.svg" />
            </div>
          </td>
          <td>
            <img class="social" src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/twitter.svg" />
            <img class="social" src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/facebook.svg" />
          </td>
        </tr>
        <tr>
          <td>
            <img class="avatar" src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/047-girl-25.svg" />
          </td>
          <td>
            <h3>Melinda Trump</h3>
            <h4>Creative Director</h4>
          </td>
          <td>
            <h4>Rating</h4>
            <div class="stars">
              <img src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/star-1.svg" />
              <img src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/star-1.svg" />
              <img src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/star-1.svg" />
              <img src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/star-1.svg" />
              <img src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/star-0.svg" />
            </div>
          </td>
          <td>
            <img class="social" src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/twitter.svg" />
            <img class="social" src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/facebook.svg" />
          </td>
        </tr>
        <tr>
          <td>
            <img class="avatar" src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/043-boy-18.svg" />
          </td>
          <td>
            <h3>Bo Larsson</h3>
            <h4>Chief Designer</h4>
          </td>
          <td>
            <h4>Rating</h4>
            <div class="stars">
              <img src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/star-1.svg" />
              <img src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/star-1.svg" />
              <img src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/star-0.svg" />
              <img src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/star-0.svg" />
              <img src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/star-0.svg" />
            </div>
          </td>
          <td>
            <img class="social" src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/twitter.svg" />
            <img class="social" src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/facebook.svg" />
          </td>
        </tr>
      </tbody>
    </table>
    <table>
      <tbody class="active">
        <tr>
          <td>
            <img class="avatar" src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/014-girl-7.svg" />
          </td>
          <td>
            <h3>Shannon Drake</h3>
            <h4>Copywriter</h4>
          </td>
          <td>
            <h4>Rating</h4>
            <div class="stars">
              <img src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/star-1.svg" />
              <img src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/star-1.svg" />
              <img src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/star-0.svg" />
              <img src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/star-0.svg" />
              <img src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/star-0.svg" />
            </div>
          </td>
          <td>
            <img class="social" src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/twitter.svg" />
            <img class="social" src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/facebook.svg" />
          </td>
        </tr>
        <tr>
          <td>
            <img class="avatar" src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/018-girl-9.svg" />
          </td>
          <td>
            <h3>Taylor Drift</h3>
            <h4>Art Director</h4>
          </td>
          <td>
            <h4>Rating</h4>
            <div class="stars">
              <img src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/star-1.svg" />
              <img src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/star-1.svg" />
              <img src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/star-1.svg" />
              <img src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/star-0.svg" />
              <img src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/star-0.svg" />
            </div>
          </td>
          <td>
            <img class="social" src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/twitter.svg" />
            <img class="social" src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/facebook.svg" />
          </td>
        </tr>
        <tr>
          <td>
            <img class="avatar" src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/001-boy.svg" />
          </td>
          <td>
            <h3>Peter Rose</h3>
            <h4>Photographer</h4>
          </td>
          <td>
            <h4>Rating</h4>
            <div class="stars">
              <img src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/star-1.svg" />
              <img src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/star-1.svg" />
              <img src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/star-1.svg" />
              <img src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/star-1.svg" />
              <img src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/star-1.svg" />
            </div>
          </td>
          <td>
            <img class="social" src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/twitter.svg" />
            <img class="social" src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/facebook.svg" />
          </td>
        </tr>
      </tbody>
    </table>
    <table>
      <tbody class="active">
        <tr>
          <td>
            <img class="avatar" src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/047-girl-25.svg" />
          </td>
          <td>
            <h3>Kate Best</h3>
            <h4>Developer</h4>
          </td>
          <td>
            <h4>Rating</h4>
            <div class="stars">
              <img src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/star-1.svg" />
              <img src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/star-1.svg" />
              <img src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/star-1.svg" />
              <img src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/star-1.svg" />
              <img src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/star-0.svg" />
            </div>
          </td>
          <td>
            <img class="social" src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/twitter.svg" />
            <img class="social" src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/facebook.svg" />
          </td>
        </tr>
        <tr>
          <td>
            <img class="avatar" src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/043-boy-18.svg" />
          </td>
          <td>
            <h3>Ben North</h3>
            <h4>UX Designer</h4>
          </td>
          <td>
            <h4>Rating</h4>
            <div class="stars">
              <img src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/star-1.svg" />
              <img src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/star-1.svg" />
              <img src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/star-0.svg" />
              <img src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/star-0.svg" />
              <img src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/star-0.svg" />
            </div>
          </td>
          <td>
            <img class="social" src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/twitter.svg" />
            <img class="social" src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/facebook.svg" />
          </td>
        </tr>
        <tr>
          <td>
            <img class="avatar" src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/018-girl-9.svg" />
          </td>
          <td>
            <h3>Claire Tait</h3>
            <h4>UI Engineer</h4>
          </td>
          <td>
            <h4>Rating</h4>
            <div class="stars">
              <img src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/star-1.svg" />
              <img src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/star-1.svg" />
              <img src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/star-1.svg" />
              <img src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/star-1.svg" />
              <img src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/star-0.svg" />
            </div>
          </td>
          <td>
            <img class="social" src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/twitter.svg" />
            <img class="social" src="https://raw.githubusercontent.com/frontend-joe/es6-widgets/600216ed9a0cc84dca91fae2dcef809ab1a1da7c/widget-1/img/facebook.svg" />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</article>

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background: #f5f8fa;
  color: #181c32;
  font-family: "Euclid Circular A", "Poppins";
}

h2,
h3,
h4 {
  margin: 0;
  font-weight: 500;
}

h2 {
  font-size: 18px;
}

h3 {
  font-size: 14px;
}

h4 {
  color: #a1a5b7;
  font-size: 12px;
}

table {
  width: 100%;
}

table tr td {
  padding: 10px 0;
}

.card {
  padding: 20px;
  border-radius: 10px;
  background: #ffffff;
  width: 400px;
}

.card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.card header button {
  background: transparent;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

.avatar {
  width: 36px;
  height: 36px;
}

.stars {
  display: flex;
  gap: 3px;
}

.stars img {
  width: 16px;
  height: 16px;
}

.social {
  width: 32px;
  height: 32px;
  vertical-align: middle;
}

.buttons {
  display: flex;
}

.buttons button {
  display: grid;
  place-items: center;
  padding: 14px;
  border-radius: 6px;
  color: #a1a5b7;
}

.buttons button.active {
  background: #ecf5fd;
  color: #009ef7;
}

.tables {
  position: relative;
  height: 196px;
}

table {
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  animation: table-out 0.2s both;
}

table tr td:nth-child(2) {
  width: 140px;
}

table tr td:last-child {
  text-align: right;
}

@keyframes table-in {
  0% {
    opacity: 0;
    visibility: hidden;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}

@keyframes table-out {
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

table.active {
  animation: table-in 0.2s 0.2s both;
}

const buttons = document.querySelectorAll(".buttons button");

const tables = document.querySelectorAll(".tables table");

const selectList = (element, index = 0) => {
  tables.forEach((table) => table.classList.remove("active"));
  tables[index].classList.add("active");

  if (element) {
    buttons.forEach((button) => button.classList.remove("active"));
    element.classList.add("active");
  }
};

selectList();

Navigation Tabs with Icons

Elevate your website's navigation with dynamic tabs featuring icons. Learn how to implement stylish tabs with icons using HTML and CSS to enhance user experience and engagement.

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

<div class="widget">
  <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" />

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

    <div class="content">
      <div class="content-inner">
        <div>
          <h2>Home</h2>
          <p>
            This is the tab content, you can put anything you like in here.
          </p>
        </div>
        <div>
          <h2>Account</h2>
          <p>
            This is the tab content, you can put anything you like in here.
          </p>
        </div>
        <div>
          <h2>Settings</h2>
          <p>
            This is the tab content, you can put anything you like in here.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

* {
  box-sizing: border-box;
}

:root {
  --color-primary: #8f44fd;
  --tab-width: 300px;
  --button-width: 64px;
}

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

body {
  display: grid;
  place-items: center;
  margin: 0;
  font-family: "Poppins";
  line-height: 1.5;
  background: #24262a;
  color: #f9f9f9;
}

.widget {
  background: #17181a;
  width: var(--tab-width);
  border-radius: 8px;
}

input {
  display: none;
}

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

.content {
  position: relative;
  overflow: hidden;
  height: 140px;
}

.content-inner {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  width: calc(var(--tab-width) * 3);
  transition: 0.3s;
}

.content-inner > div {
  width: inherit;
  padding: 20px;
}

label {
  padding: 20px;
  font-size: 15px;
  width: var(--button-width);
  opacity: 0.35;
  cursor: pointer;
}

p {
  margin: 0;
  font-size: 14px;
  color: #888889;
}

.buttons {
  position: relative;
  display: flex;
  border-bottom: 1px solid #575757;
}

.underline {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 3px;
  background: var(--color-primary);
  transition: 0.2s;
}

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

.tabs input:nth-child(2):checked ~ .buttons .underline {
  translate: var(--button-width) 0;
}

.tabs input:nth-child(3):checked ~ .buttons .underline {
  translate: calc(var(--button-width) * 2) 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) {
  opacity: 1;
}

.tabs input:nth-child(1):checked ~ .content > .content-inner {
  translate: 0 0;
}

.tabs input:nth-child(2):checked ~ .content > .content-inner {
  translate: calc(0px - var(--tab-width)) 0;
}

.tabs input:nth-child(3):checked ~ .content > .content-inner {
  translate: calc(0px - var(--tab-width) * 2) 0;
}

```
No need of JavaScript
```

Navigation Bar with Dropdown Menus

Elevate user experience on your website with a navigation bar featuring dropdown menus. Learn how to integrate dropdown navigation into your navbar to provide users with additional 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" />

<nav>
  <a class="item">Home</a>
  <a class="item">About</a>
  <div class="item">
    Skills
    <div class="dropdown">
      <div>
        <a>React</a>
        <a>Angular</a>
        <a>Vue</a>
      </div>
    </div>
  </div>
  <a class="item">Contact</a>
  <div class="underline"></div>
</nav>

* {
  box-sizing: border-box;
}

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

body {
  font-family: "Poppins";
  background: #12161f;
  color: white;
  margin: 0;
  height: 94vh;
  display: grid;
  place-items: center;
}

nav {
  position: relative;
  background: #1f2635;
  font-weight: 400;
  font-size: 0;
  display: flex;
  padding: 0;
  width: 80%;
}

nav .item {
  font-size: 0.8rem;
  display: inline-block;
  position: relative;
  padding: 0 20px;
  cursor: pointer;
  z-index: 5;
  min-width: 25%;
  height: 60px;
  line-height: 60px;
  text-align: center;
}

.dropdown {
  overflow: hidden;
  list-style: none;
  position: absolute;
  padding: 0;
  width: 100%;
  left: 0;
  top: 62px;
}
.dropdown > div {
  transform: translate(0, -100%);
  transition: all 0.5s 0.1s;
  position: relative;
}

.dropdown a {
  display: block;
  padding: 0;
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: var(--color-primary);
}

.dropdown a:hover {
  background: #254fb5;
}

.underline {
  height: 6px;
  background: var(--color-primary);
  position: absolute;
  bottom: 0;
  width: 25%;
  z-index: 2;
  pointer-events: none;
  transition: 0.35s;
}

nav .item:hover > .dropdown > div {
  transform: translate(0);
}

nav .item:nth-child(1):hover ~ .underline {
  transform: translate(0, 0);
}

nav .item:nth-child(2):hover ~ .underline {
  transform: translate(100%, 0);
}

nav .item:nth-child(3):hover ~ .underline {
  transform: translate(200%, 0);
}

nav .item:nth-child(4):hover ~ .underline {
  transform: translate(300%, 0);
}

```
No need of JavaScript
```

Simple Navigation Tab

Enhance website navigation with our versatile navigation tab UI component, seamlessly integrating HTML, CSS, and JavaScript functionalities.

Author: Admin

Preview
Code

<div class="tab">
  <button class="tablinks" onclick="openTab(event, 'Home')">Home</button>
  <button class="tablinks" onclick="openTab(event, 'About')">About</button>
  <button class="tablinks" onclick="openTab(event, 'Services')">
    Services
  </button>
  <button class="tablinks" onclick="openTab(event, 'Contact')">
    Contact
  </button>
</div>

<div id="Home" class="tabcontent">
  <h3>Home</h3>
  <p>Content for home tab goes here.</p>
</div>

<div id="About" class="tabcontent">
  <h3>About</h3>
  <p>Content for about tab goes here.</p>
</div>

<div id="Services" class="tabcontent">
  <h3>Services</h3>
  <p>Content for services tab goes here.</p>
</div>

<div id="Contact" class="tabcontent">
  <h3>Contact</h3>
  <p>Content for contact tab goes here.</p>
</div>

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

.tab button:hover {
  background-color: #ddd;
}

.tab button.active {
  background-color: #ccc;
}

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

@media screen and (max-width: 600px) {
  .tab button {
    width: 100%;
  }
}

function openTab(evt, tabName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
}