Morphing Nav

NewPremium

Navigation that morphs between three modes: full bar, floating pill, and fullscreen overlay. Scroll-aware with direction-aware motion.

navigationmorphingscrollanimateddirection-aware

Installation

Terminalbash
npx motioncraft add morphing-nav

Usage

morphing-nav.tsxtsx
import { MorphingNav } from "@/components/navigation/morphing-nav";

<MorphingNav items={[
  { label: "Home", href: "/" },
  { label: "About", href: "/about" },
  { label: "Work", href: "/work" },
]} />

Props

PropTypeDefaultDescription
items*NavItem[]Navigation items with label and href
logoReactNodeLogo element
classNamestringAdditional CSS classes

Related Components