Skip to content
Cuelark UI
NavigationAnimated

Dropdown Menu

Action menus with keycap shortcuts, submenus and checkable items.

A dropdown menu lists actions behind a trigger: account menus, row actions, overflow menus. Cuelark menus spring from their trigger, show shortcuts as keycaps, use dashed separators and mono group labels, and support submenus, checkbox and radio items.

Preview

Installation

pnpm dlx shadcn@latest add https://ui.cuelark.com/r/dropdown-menu.json

The CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/dropdown-menu.

Builds on: motion

Usage

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

<DropdownMenu>
  <DropdownMenuTrigger asChild><Button>Open</Button></DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Profile</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Motion

How it moves

Menus and submenus spring out of their anchor side (popIn).

Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.

API reference

DropdownMenuItem

PropTypeDefaultDescription
variant"default" | "destructive""default"Destructive items are red.
insetboolean—Indent to align with checkable items.

DropdownMenuShortcut

A keycap hint.

DropdownMenuCheckboxItem · DropdownMenuRadioGroup · DropdownMenuRadioItem · DropdownMenuSub · DropdownMenuLabel · DropdownMenuSeparator

Accessibility

  • Full WAI-ARIA menu pattern with typeahead.
  • Arrow keys navigate, Right opens submenus, Esc closes and returns focus.

FAQ

Also searched as: react dropdown menu · shadcn dropdown menu · context menu actions · user menu dropdown · radix dropdown