Xzero UI
Pro library
Special componentsMorph nav

Morph navPro

A navigation bar that morphs into rich menus, search, and a compact state as one surface.

$ pnpm dlx shadcn@4.23.0 add @xzero-ui-pro/morph-nav
Live · keyboard ready

When to use

When not to use

Installation

Register both Xzero UI namespaces in your project's components.json:

{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}

npx shadcn@4.23.0 add @xzero-ui-pro/morph-nav

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

Usage

import { MorphNav } from "@/components/xzero/morph-nav/morph-nav";

export function SiteHeader({ scrolled }: { scrolled: boolean }) {
  return (
    <MorphNav
      brand={{ name: "Xzero", mark: <Logo />, href: "/" }}
      items={[
        { value: "product", label: "Product", links: [
          { label: "Components", description: "Motion-first building blocks", href: "/components" },
          { label: "Blocks", description: "Full sections", href: "/blocks" },
        ] },
        { value: "pricing", label: "Pricing", href: "/pricing" },
      ]}
      search={{ items: [{ label: "Dialog", group: "Components", href: "/components/dialog" }] }}
      action={{ label: "Sign up", href: "/sign-up" }}
      current="product"
      compact={scrolled}
    />
  );
}

Examples

Tighten on scroll

const [scrolled, setScrolled] = useState(false);
useEffect(() => {
  const onScroll = () => setScrolled(window.scrollY > 24);
  window.addEventListener("scroll", onScroll, { passive: true });
  return () => window.removeEventListener("scroll", onScroll);
}, []);

<MorphNav items={items} current={section} compact={scrolled} onNavigate={d => d.href && router.push(d.href)} />

API reference

MorphNav

A site navigation bar made of one continuous surface: a highlight glides between items, items with links grow the bar into a dropdown panel, and search morphs out of the bar itself.

PropTypeDefaultDescription
items (required){ value: string; label: string; href?: string; links?: { label: string; description?: string; icon?: ReactNode; href?: string }[]; columns?: 1 | 2; feature?: ReactNode; footer?: ReactNode }[]–Top level destinations. Items with links or a feature open a panel; other items act as plain links. columns defaults to 2 when there are more than three links. Clicking a link or button inside feature closes the panel.
brand{ name: string; mark: ReactNode; href?: string }–Brand button at the start of the bar.
action{ label: string; icon?: ReactNode; href?: string; onClick?: () => void }–The one primary action at the end of the bar.
search{ placeholder?: string; items: { label: string; description?: string; group?: string; icon?: ReactNode; href?: string; keywords?: string }[] }–Search entries. Leave it out to hide search.
currentstring–Value of the item that holds the current page.
compactbooleanfalseTightens the bar, for example once the page scrolls.
collapseBelownumber720Below this container width in px the items fold into one menu.
onNavigate(destination: { label: string; href?: string; section?: string }) => void–Called for every destination: links, search results, plain items, and the brand.
labelstring"Main"Accessible name of the nav landmark.
classNamestring–Extra class on the nav element.

Keyboard interactions

KeysAction
ArrowLeft / ArrowRightMoves between top level items, wrapping; an open panel follows to the new item.
Home / EndFocuses the first or last item.
ArrowDown / Enter / SpaceOn an item with a panel, opens it and moves focus to its first link. If the panel is already open, moves focus into it.
ArrowUp / ArrowDownInside a panel, moves between links; ArrowUp on the first link returns to the trigger. In search, moves the active result.
EnterIn search, opens the active result.
EscapeCloses search or the open panel and returns focus to where it came from.

Accessibility

Motion

Responsive behavior

Performance

Notes for AI

Also in docks and tabs

Guidance for AI tools

Morph nav: A navigation bar that morphs into rich menus, search, and a compact state as one surface. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://ui.xzero.co.uk/llms.txt

Browse all components