Docs

Morph Navbar

Morph Navbar

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

Open in
Loading...

Installation

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

Usage

import { MorphNavbar, MorphNavbarItem } from "@/components/morph-navbar";
<MorphNavbar activeHref={activeHref}>
  <MorphNavbarItem href="/">Home</MorphNavbarItem>
  <MorphNavbarItem href="/about">About</MorphNavbarItem>
  <MorphNavbarItem href="/contact">Contact</MorphNavbarItem>
  <MorphNavbarItem href="/projects">Projects</MorphNavbarItem>
</MorphNavbar>

Props / Data Attributes

<MorphNavbar />

PropTypeDescription
activeHrefstringThe href of the active item.

<MorphNavbarItem />

PropTypeDescription
hrefstringThe link of the item.
childrenReactNodeThe content of the item.
classNamestringOptional class names for custom styling.

Credits

This component is inspired by this tweet by Raul Dronca.

Notch NavAnimated Mobile Navbar