Underline Indicator Navigation

An underline indicator navigation built with pure HTML and CSS that highlights the active or hovered link using a sliding underline effect. It enhances navigation state visibility and interaction clarity without requiring JavaScript.

Usage

Use this component when interfaces require minimal yet clear navigation emphasis, such as landing page headers, documentation menus, dashboards, or content navigation bars.

Implementation

The underline animation is implemented using CSS pseudo elements and transform based transitions, allowing the indicator to move smoothly between navigation items. Responsive styling ensures consistent alignment across screen sizes.

HTML

<nav class="nav-underline">
  <a class="is-active">Overview</a>
  <a>Pricing</a>
  <a>Support</a>
</nav>

<nav class="nav-underline">
  <a class="is-active">Overview</a>
  <a>Pricing</a>
  <a>Support</a>
</nav>

CSS

.nav-underline {
  width: 200px;
  display: flex;
  justify-content: space-around;
  padding: 0.5rem 0;
}

.nav-underline a {
  position: relative;
  font-size: 12px;
  color: #374151;
  text-decoration: none;
  cursor: pointer;
  padding-bottom: 4px;
}

.nav-underline a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #6366f1, #22d3ee);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms ease;
}

.nav-underline a:hover::after,
.nav-underline a.is-active::after {
  transform: scaleX(1);
}

@media (prefers-color-scheme: dark) {
  .nav-underline a {
    color: #e5e7eb;
  }
}

.nav-underline {
  width: 200px;
  display: flex;
  justify-content: space-around;
  padding: 0.5rem 0;
}

.nav-underline a {
  position: relative;
  font-size: 12px;
  color: #374151;
  text-decoration: none;
  cursor: pointer;
  padding-bottom: 4px;
}

.nav-underline a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #6366f1, #22d3ee);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms ease;
}

.nav-underline a:hover::after,
.nav-underline a.is-active::after {
  transform: scaleX(1);
}

@media (prefers-color-scheme: dark) {
  .nav-underline a {
    color: #e5e7eb;
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Uses animated underline indicators
• Enhances active link visibility
• Fully responsive across breakpoints
• Suitable for headers and navigation bars
• Easy to customize underline thickness and color

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.