Modern Pill Nav Tabs

Standard square tabs are outdated. Let’s design a floating “pill” navigation background dynamically sliding behind the active tab.

Relative & Absolute Positioning

To get a sliding pill effect, the pill itself is a <div class="pill"></div> positioned absolutely inside the relative navigation container.

.nav-container {
  display: flex;
  position: relative;
  background: #f3f4f6;
  border-radius: 50px;
}
.tab {
  z-index: 2;
  cursor: pointer;
  padding: 10px 30px;
}
.pill {
  position: absolute;
  height: 100%;
  border-radius: 50px;
  background: white;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: .3s;
}

Check out the Live Demo. When you click a tab, JavaScript updates the left property of the pill so it beautifully glides to the new item!