NAVIGATION

Active Link Navbar

A clean navigation menu with a highlighted active link and smooth hover effects. It uses simple HTML and CSS to clearly show the current page.

HTML
<nav class="active-navbar" aria-label="Primary Navigation">
  <a href="#" class="active">Home</a>
  <a href="#">Components</a>
  <a href="#">Playground</a>
  <a href="#">Blog</a>
  <a href="#">About</a>
</nav>
CSS
.active-navbar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;

  padding:9px;

  background:#0b1423;
  border:1px solid #1c2a40;
  border-radius:14px;
}

.active-navbar a{
  padding:10px 17px;
  border-radius:9px;

  color:#aab4c8;
  font-size:14px;
  font-weight:600;
  text-decoration:none;

  transition:
    color .25s ease,
    background .25s ease;
}

.active-navbar a:hover{
  color:#ffffff;
  background:rgba(34,211,238,.08);
}

.active-navbar a.active{
  color:#ffffff;

  background:linear-gradient(
    135deg,
    #0891b2,
    #7c3aed
  );

  box-shadow:0 5px 18px rgba(139,92,246,.2);
}
JS
document.querySelectorAll('.active-navbar a').forEach(function(link) {

  link.addEventListener('click', function(e) {

    e.preventDefault();

    const navbar = this.closest('.active-navbar');

    navbar.querySelectorAll('a').forEach(function(item) {
      item.classList.remove('active');
    });

    this.classList.add('active');

  });

});

How This Active Link Navbar Works

The Active Link Navbar is a compact horizontal navigation component that visually marks the most recently selected link. Its HTML contains a semantic nav element with five links: Home, Components, Playground, Blog, and About. Home starts with the active class, so it appears selected when the component first loads.

The .active-navbar container uses Flexbox to arrange the links. align-items: center keeps them vertically aligned, while justify-content: center places the group in the middle of the available space. An 8px gap separates the individual navigation items.

The navbar also uses flex-wrap: wrap. This is important when the available horizontal space becomes too narrow for all five links. Instead of forcing the navigation beyond its container, Flexbox is allowed to move links onto another row. The component therefore has some built-in flexibility without requiring a separate media query.

The container has 9px padding, a dark #0b1423 background, a #1c2a40 border, and 14px rounded corners. These values create a defined navigation surface around the individual links.

Each anchor has 10px 17px padding and a 9px border radius. The default text color is the muted #aab4c8, with a 14px font size and a font weight of 600. The standard underline is removed using text-decoration: none.

Hovering over any navigation link changes the text to white and adds a subtle rgba(34,211,238,.08) background. Both the color and background changes use .25s ease transitions, preventing the hover state from appearing abruptly.

The selected link is styled through .active-navbar a.active. Its text becomes white, while the background changes to a 135-degree linear gradient between #0891b2 and #7c3aed. A 0 5px 18px rgba(139,92,246,.2) shadow adds a soft purple glow beneath the selected item.

JavaScript is responsible for moving the active state between links. The script begins with document.querySelectorAll('.active-navbar a'), selecting every anchor inside the component. It then uses forEach() to attach a click listener to each link.

When a navigation item is clicked, e.preventDefault() stops the anchor’s normal link behavior. The handler then calls this.closest('.active-navbar') to find the navbar containing the clicked link. This keeps the active-state lookup scoped to the relevant component.

Next, navbar.querySelectorAll('a') retrieves all links inside that navbar. Another forEach() removes the active class from each one. Finally, this.classList.add('active') assigns the selected state to the link that was clicked. For more information about adding and removing classes this way, see the MDN classList documentation.

Because the supplied links all use href="#" and their default behavior is prevented, the current component acts as an interactive navigation-state demonstration rather than performing real page navigation. There is also no URL matching, scroll tracking, or page-load logic for automatically determining which link corresponds to the current location.

Customizing the Active Link Navbar

The component has a small HTML structure and focused CSS, so its labels, spacing, colors, and selected state can be adapted easily.

  • Replace Home, Components, Playground, Blog, and About with the sections required by your interface.
  • Move the initial active class from Home to another link if a different option should start selected.
  • Adjust the 8px flex gap to increase or reduce spacing between navigation items.
  • Change the 10px 17px link padding to create smaller or larger clickable areas.
  • Modify #0b1423 and #1c2a40 to change the navbar background and border colors.
  • Replace #0891b2 and #7c3aed with different colors for the active-link gradient.
  • Adjust the 135deg gradient angle to change the direction of the selected background.
  • Change the .25s color and background transitions to make hover feedback faster or slower.

Where to Use This Active Link Navbar

This navigation pattern is useful when users need a clear visual indication of which option they have selected within a small set of destinations.

  • Portfolio section selectors
  • Component library navigation
  • Dashboard view controls
  • Documentation category menus
  • Playground or demo interfaces
  • Compact website navigation

The class-based state handling makes the selected option immediately visible while keeping the JavaScript short. If the navigation instead needs to remain visible while content scrolls, the Sticky Navbar provides a related CSS-based approach.

Frequently Asked Questions

How does the Active Link Navbar change the selected link?

JavaScript listens for clicks on every navbar anchor. It removes active from all links inside the same navbar and then adds the class to the clicked link.

Why is Home active when the component first loads?

The Home anchor already contains class="active" in the supplied HTML. CSS detects that class and applies the gradient background, white text, and shadow.

Do the navigation links open different pages?

No. The current links use href="#", and the click handler calls e.preventDefault(). The component therefore changes the visual active state without performing normal link navigation.

Does the Active Link Navbar have a mobile media query?

No. There is no media query in the supplied CSS. Instead, .active-navbar uses flex-wrap: wrap, allowing links to move onto additional rows when horizontal space becomes limited.

The Active Link Navbar combines a flexible wrapping layout, gradient selected state, simple hover transitions, and JavaScript class management to clearly show which navigation option is currently selected.

Scroll to Top