Docs

Morph Navbar

Morph Navbar

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

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.