NAVIGATION

Pill Hover Navbar

A modern navigation menu with smooth pill-shaped hover backgrounds. It uses simple HTML and CSS and works well for clean website headers.

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

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

.pill-navbar a{
  padding:10px 18px;
  border-radius:30px;

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

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

.pill-navbar a:hover{
  color:#ffffff;

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

  transform:translateY(-2px);
}

How This Pill Hover Navbar Works

The Pill Hover Navbar is a CSS-only navigation component that gives the overall menu a rounded capsule shape and turns individual links into gradient pills on hover. Its HTML contains a semantic nav element with five links: Home, Components, Playground, Blog, and About.

The .pill-navbar container uses Flexbox to organize the links. display: flex places them horizontally, align-items: center keeps them vertically aligned, and justify-content: center centers the complete group. An 8px gap provides spacing between adjacent navigation items.

The container also uses flex-wrap: wrap. If the available horizontal space becomes too narrow for all five links, Flexbox can move items onto another row. The published CSS does not contain a media query, so wrapping is the component’s built-in method for adapting to reduced width.

The outer navbar uses 8px of padding, a dark #0b1423 background, and a 1px solid #1c2a40 border. Its border-radius: 50px creates the large pill-shaped outline around the complete navigation group.

Each anchor receives 10px 18px padding and its own 30px border radius. This means the links already have rounded pill-shaped boundaries even though their backgrounds are transparent in the default state. When a hover background is added, it naturally follows those rounded edges.

The default link text uses the muted #aab4c8 color, a 14px font size, and a font weight of 600. The standard anchor underline is removed with text-decoration: none, keeping the navigation appearance consistent with the rounded container.

The main visual change happens through .pill-navbar a:hover. On hover, the text switches to white and the link receives a 135deg linear gradient. The gradient starts with cyan-blue #0891b2 and ends with purple #7c3aed.

The hovered link also uses transform: translateY(-2px). This shifts the complete pill upward by two pixels, providing an additional visual response beyond the color change.

Color, background, and transform are all included in the transition declaration with .25s ease. The text and movement therefore transition over the same duration. The background is also listed as a transitioning property, while the hover state supplies the gradient value. For more information about the movement applied to each pill, see the MDN transform documentation.

There are no pseudo-elements, shadows, icons, or active classes in the published component. The hover state is attached directly to each anchor, keeping the interaction structure small.

The Pill Hover Navbar also does not use JavaScript. Its published JavaScript field is empty, so there are no event listeners, menu toggles, active-link updates, or click-based animations. Everything shown by the component is controlled through HTML and CSS.

The supplied anchors use href="#", which means their destinations are placeholders. Real page paths or URLs would need to replace these values when integrating the navbar into a working site.

Customizing the Pill Hover Navbar

The component can be adapted through its existing dimensions, spacing, colors, gradient, and hover movement without changing the underlying layout.

  • Replace Home, Components, Playground, Blog, and About with navigation labels that match your website.
  • Change the 8px container gap to increase or reduce spacing between links.
  • Adjust the navbar’s 8px padding to change the space between the links and outer pill boundary.
  • Modify the 50px outer border radius to change the overall capsule shape.
  • Adjust the 10px 18px link padding or 30px link radius to alter the size and roundness of individual pills.
  • Replace #0891b2 and #7c3aed with different colors for the hover gradient.
  • Change the 135deg gradient angle to alter how the two colors flow across each link.
  • Modify translateY(-2px) or the .25s transition values to control the hover movement and timing.

Where to Use This Pill Hover Navbar

The rounded design works well in interfaces where a compact group of primary navigation links needs clear separation from surrounding content.

  • Developer portfolio websites
  • SaaS and product landing pages
  • Component showcase websites
  • Personal websites and blogs
  • Creative project pages
  • Developer tools and playground interfaces

The outer capsule and individual rounded links keep the component visually consistent even before interaction. If you need a pill-based design with a persistent selected state instead of hover-only styling, the Neumorphic Pill Navigation is a closely related CodeRipple component.

Frequently Asked Questions

How does the Pill Hover Navbar create its rounded shape?

The main .pill-navbar container uses border-radius: 50px, while each anchor uses a 30px border radius. These values create rounded outer and inner pill shapes.

What happens when a navigation link is hovered?

Its text changes from #aab4c8 to white, a cyan-to-purple gradient appears behind it, and the entire link moves upward by 2px.

Does the Pill Hover Navbar use JavaScript?

No. The published JavaScript is empty. The layout, wrapping, gradient hover state, and movement are handled entirely through CSS.

Does the navbar include a mobile breakpoint?

No dedicated media query is included. Instead, the Flexbox container uses flex-wrap: wrap, allowing links to move onto another row when horizontal space is limited.

The Pill Hover Navbar combines an outer capsule, rounded navigation links, a two-color hover gradient, and subtle vertical movement to create a compact navigation pattern without JavaScript.

Scroll to Top