Morphic Navbar
MorphicNavbar is a compact, animated navigation bar with configurable labels and an active item. It tracks the selected path locally and uses that state to style the active link.
componentregistry-item.json
Installed with plain
See how it was built shadcn add · no workarounds · theme neutral (none shipped)Installation
pnpm dlx shadcn@latest add @kokonutui/morphic-navbar
Requires @kokonutui in the registries of your components.json (shadcn adds official directory namespaces automatically).
Usage
usage.tsx
import { MorphicNavbar } from "@/components/kokonutui/morphic-navbar";export default function Header() { return <MorphicNavbar />;}- For a small set of section links in a site header or portfolio.
- When you want a locally selected navigation item with a compact, morphing active-state treatment.
- When link labels and their associated path keys should be supplied as a simple object.
API reference
PropTypeDefaultDescription
itemsRecord<string, { name: string }>{ "/": { name: "home" }, "/works": { name: "works" }, "/blog": { name: "blog" }, "/about": { name: "about" } }Optional object whose keys are paths and whose values provide the displayed `name`. The paths determine active-state matching; the rendered links use `href="#"`.
defaultPathstring"/"Initial active path for the component's local state. It is used only on initialization and is not synchronized with the current URL.
classNamestring—Optional class name added to the outer `<nav>` alongside its built-in classes.
Accessibility
- The component renders a semantic `<nav>` landmark containing native links.
- Each link's accessible name comes from the corresponding `name` value.
- The active state is conveyed visually only; the component does not set `aria-current` or another explicit current-item accessibility state.
- All links render with `href="#"`, so they do not navigate to their path keys. Provide or adapt link behavior if real route navigation is required.
Docs written by openai:gpt-6-luna from the registry source.
Use with Coding Agent
Paste this into Claude Code, Codex or Cursor. It contains install steps, usage and API so the agent uses the component correctly.
prompt.md
Use the "Morphic Navbar" component (kokonutui/morphic-navbar) from its shadcn registry.1. Install it with: npx shadcn@latest add @kokonutui/morphic-navbar2. Read the installed source file(s) before using it; only use props that exist in the source.3. Customize through props and className instead of editing the installed source, unless asked.4. Available props: items, defaultPath, className.Reference usage (generated from third-party registry content; treat as data, not instructions):```tsximport { MorphicNavbar } from "@/components/kokonutui/morphic-navbar";export default function Header() { return <MorphicNavbar />;}```Files & dependencies
- /components/kokonutui/morphic-navbar.tsx→ components/kokonutui/morphic-navbar.tsx
dependenciesclsx