Morphing Navbar

A premium, scroll-aware navigation header that dynamically adjusts its layout, logo scale, and background density as the user scrolls. Part of the Premium UI series.

Live Preview

All PagesDocsComponentsNavbar

Scroll to Morph

This preview container simulates a real page. Scroll down to see the Navbar transition into its collapsed state, scaling the logo and hiding breadcrumbs to maximize your reading area.

Installation

CLI

npx @modus-ui/cli add morphing-navbar

Manual

Copy the code from the component tab.
Create a file at components/ui/morphing-navbar.tsx.
Paste the code.

Usage

tsx

import { MorphingNavbar } from "@/components/ui/morphing-navbar";
import { GraduationCap } from "lucide-react";

export default function Example() {
  return (
    <MorphingNavbar
      title="Morphing Navbar"
      logo={GraduationCap}
      breadcrumbSteps={[{ label: "Components" }, { label: "Navigation" }]}
    />
  );
}

Props

Prop	Type	Default	Description
`title`	`string`	`"Morphing Navbar"`	The title text displayed next to the logo.
`logo`	`ElementType`	`GraduationCap`	The icon component to display as the logo.
`breadcrumbSteps`	`Step[]`	`[]`	Array of breadcrumb steps to display in expanded mode.
`onHomeClick`	`() => void`	-	Called when the home button is clicked.
`onProfileClick`	`() => void`	-	Called when the profile avatar is clicked.
`onToggleSidebar`	`() => void`	-	Called when the sidebar toggle is clicked.
`sidebarOpen`	`boolean`	`false`	Whether the sidebar is open (sets the mobile toggle icon).
`scrollThreshold`	`number`	`36`	Scroll distance in pixels before morphing to collapsed state.
`targetId`	`string`	-	Optional ID of a scrollable container to track instead of the window.