1

Morph NavNew

A floating action button that morphs through states (closed/main/sub) with SVG path-morphing trigger icon and directional panel slides.

Dependencies

motion

Interaction Type

Click the trigger to open. Items with sub-menus drill into a sub-view. The trigger icon morphs between hamburger/minus/back-arrow.

Props

Options you can pass to customize this component.

Prop
Type
Description
items*
MorphNavItem[]

The nav items. Required.

placement
'bottom-end' | 'bottom-start' | 'top-end' | 'top-start'

Panel placement.

onNavigate
(href: string, item: MorphNavItem) => void

Called on link navigation.

Installation

npx shadcn@latest addhttps://ui.nexvyn.dev/r/morph-nav.json

How to use

<MorphNav items={[{ id: 'dash', label: 'Dashboard', href: '/dash' }]} />

Source Code

Click the code icon in the top-right corner to view the source code.

Contact

Questions or feedback? Reach out anytime.

License & Usage

  • •Free for personal and commercial use
  • •No attribution required
  • •Cannot be resold as a standalone product
  • •Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use
// No code loaded.
npx shadcn@latest addhttps://ui.nexvyn.dev/r/morph-nav.json