Dropdown Menu

A floating menu of actions. Built on Radix DropdownMenu with grouped items, shortcuts, separators, and sub-menus.

Import

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuTrigger,
} from "poyraz-ui/molecules";

Default

A menu with grouped items, keyboard shortcuts, and a separator.

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">Open Menu</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>My Account</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuGroup>
      <DropdownMenuItem>
        <User className="mr-2 h-4 w-4" />
        Profile
        <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
      </DropdownMenuItem>
      <DropdownMenuItem>
        <CreditCard className="mr-2 h-4 w-4" />
        Billing
        <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
      </DropdownMenuItem>
      <DropdownMenuItem>
        <Settings className="mr-2 h-4 w-4" />
        Settings
        <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
      </DropdownMenuItem>
    </DropdownMenuGroup>
    <DropdownMenuSeparator />
    <DropdownMenuItem>
      <LogOut className="mr-2 h-4 w-4" />
      Log out
      <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Hover + Glass

Mouse hover opens the menu; keyboard, touch, and click remain available. Surface, radius, density, and nested motion are independent options.

<DropdownMenu interaction="hover" closeDelay={160}>
  <DropdownMenuTrigger asChild>
    <Button variant="glass">Hover me</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent surface="glass" radius="xl" itemSize="lg">
    <DropdownMenuItem media={<Sparkles />} description="Generate a polished starting point">
      AI workspace
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Compact and Spacious

The same menu anatomy can be compact and text-only, or spacious with rich media and supporting copy.

<DropdownMenuContent surface="soft" itemSize="sm">...</DropdownMenuContent>
<DropdownMenuContent surface="solid" itemSize="lg" itemRadius="lg">...</DropdownMenuContent>

Sub Menu

Nested sub-menu for grouped actions.

<DropdownMenuSub>
  <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>
  <DropdownMenuSubContent>
    <DropdownMenuItem>Sub Item 1</DropdownMenuItem>
    <DropdownMenuItem>Sub Item 2</DropdownMenuItem>
  </DropdownMenuSubContent>
</DropdownMenuSub>

pnpm dlx shadcn@latest add @poyraz/dropdown-menu

Runtime dependencies

@radix-ui/react-dropdown-menu@^2.1.16, lucide-react@^0.574.0

Registry dependencies

@poyraz/poyraz-utils, @poyraz/poyraz-theme, @poyraz/poyraz-recipes

Installed files

@ui/molecules/dropdown-menu.tsx