Dropdown MenuNew

A popover action menu with a proximity-driven morphing highlight. The muted hover highlight springs between items as the pointer moves, giving the menu a fluid, alive feel.

Dependencies

motion

Interaction Type

Click the trigger to open. Hover or use arrow keys to navigate items. The highlight morphs between items with spring physics.

Props

Options you can pass to customize this component.

Prop

Type

Description

open

boolean

Controlled open state.

defaultOpen

boolean

Initial open state for uncontrolled usage. Defaults to false.

onOpenChange

(open: boolean) => void

Called when the menu opens or closes.

className

string

Additional classes for the container.

Installation

npx shadcn@latest addhttps://ui.nexvyn.dev/r/dropdown-menu.json

How to use

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
} from "@/components/ui/dropdown-menu"

export function Demo() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger>Actions</DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuItem>Edit</DropdownMenuItem>
        <DropdownMenuItem>Duplicate</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem destructive>Delete</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

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/dropdown-menu.json