Floating Pill Navigation

A floating pill navigation built with pure HTML and CSS that presents rounded navigation items within an elevated container. It enhances visual separation and interactive emphasis while maintaining responsive alignment.

Usage

Use this component when interfaces require modern rounded navigation styling, such as landing pages, dashboards, product showcases, or feature sections that benefit from soft, elevated UI elements.

Implementation

The floating effect is achieved using border radius styling, shadow layering, and controlled spacing, while navigation alignment is managed through flex based layout techniques. Responsive rules ensure consistent stacking across devices.

HTML

<nav class="nav-pill">
  <a class="is-active">Home</a>
  <a>Docs</a>
  <a>API</a>
</nav>

<nav class="nav-pill">
  <a class="is-active">Home</a>
  <a>Docs</a>
  <a>API</a>
</nav>

CSS

.nav-pill {
  width: 200px;
  padding: 0.4rem;
  border-radius: 999px;
  background: #f3f4f6;
  display: flex;
  justify-content: space-between;
  gap: 0.25rem;
}

.nav-pill a {
  flex: 1;
  text-align: center;
  padding: 0.35rem 0;
  border-radius: 999px;
  font-size: 12px;
  color: #374151;
  text-decoration: none;
  cursor: pointer;
  transition: background 200ms ease, transform 150ms ease;
}

.nav-pill a:hover {
  background: rgba(99,102,241,0.15);
  transform: translateY(-1px);
}

.nav-pill a.is-active {
  background: #6366f1;
  color: #ffffff;
}

@media (prefers-color-scheme: dark) {
  .nav-pill {
    background: #111827;
  }

  .nav-pill a {
    color: #e5e7eb;
  }

  .nav-pill a.is-active {
    background: #818cf8;
    color: #020617;
  }
}

.nav-pill {
  width: 200px;
  padding: 0.4rem;
  border-radius: 999px;
  background: #f3f4f6;
  display: flex;
  justify-content: space-between;
  gap: 0.25rem;
}

.nav-pill a {
  flex: 1;
  text-align: center;
  padding: 0.35rem 0;
  border-radius: 999px;
  font-size: 12px;
  color: #374151;
  text-decoration: none;
  cursor: pointer;
  transition: background 200ms ease, transform 150ms ease;
}

.nav-pill a:hover {
  background: rgba(99,102,241,0.15);
  transform: translateY(-1px);
}

.nav-pill a.is-active {
  background: #6366f1;
  color: #ffffff;
}

@media (prefers-color-scheme: dark) {
  .nav-pill {
    background: #111827;
  }

  .nav-pill a {
    color: #e5e7eb;
  }

  .nav-pill a.is-active {
    background: #818cf8;
    color: #020617;
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Uses pill shaped navigation styling
• Enhances visual elevation and separation
• Fully responsive across breakpoints
• Suitable for headers and feature sections
• Easy to customize spacing and shadow intensity

Preview styles shown. Production customization recommended.

Browse More UI Components

Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.