Morph Navbar

A polished navigation bar with a fluid, morphing pill that tracks the active link and hover state.

ReactHTML

Installation

pnpm dlx shadcn@latest add https://atlasui.dev/r/morph-navbar-html.json

Usage

Create a wrapper nav element with id="morph-navbar".

<nav id="morph-navbar"></nav>

Create a container div with id="morph-navbar-container" inside the nav element.

<nav id="morph-navbar">
  <div id="morph-navbar-container">...</div>
</nav>

Place your links inside the container with class="morph-navbar-item".

<nav id="morph-navbar">
  <div id="morph-navbar-container">
    <a href="#" class="morph-navbar-item">Home</a>
    <a href="#about" class="morph-navbar-item">About</a>
    <a href="#services" class="morph-navbar-item">Services</a>
    <a href="#portfolio" class="morph-navbar-item">Portfolio</a>
    <a href="#contact" class="morph-navbar-item">Contact</a>
  </div>
</nav>

Credits

This component is inspired by this tweet by Raul Dronca.

Notch NavAnimated Mobile Navbar