Animated Mobile Navbar

A simple animated mobile navbar component.

ReactHTML

Installation

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

Usage

Place the button with the id menu-trigger in the header to trigger the menu.

<button id="menu-trigger" class="menu-trigger">☰</button>

Place the following code in the body to create the animated menu.

<div id="mobile-menu" class="mobile-menu">
  <button id="menu-close" class="menu-close">✖</button>
  <nav class="menu-links">
    <a href="#" class="nav-link">Home</a>
    <a href="#" class="nav-link">About</a>
    <a href="#" class="nav-link">Services</a>
    <a href="#" class="nav-link">Portfolio</a>
    <a href="#" class="nav-link">Contact</a>
  </nav>
</div>

NOTE: The class and id value must match with your CSS and HTML codes respectively.

Morph NavbarProject Gallery