Get Started
OverlaysUpdated May 3, 2026

DropdownMenu

Keyboard-accessible menu actions anchored to a trigger.

#Default usage

Dropdown menuMenu content is rendered in a portal and supports keyboard navigation.

#Usage

Code
import {
  Button,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@froggdesign/enter-ui";

export function Example() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild><Button variant="secondary">Actions</Button></DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuItem>Rename</DropdownMenuItem>
        <DropdownMenuItem>Duplicate</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem destructive>Delete</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

#Patterns

With shortcutsShortcuts are visual hints and should match real keyboard handling in the app.

#Accessibility

DropdownMenu uses Radix menu semantics, roving focus, keyboard navigation, typeahead, and disabled item behavior.

#API

  • DropdownMenuItem supports destructive and inset.
  • Checkbox, radio, label, separator, sub-menu, and shortcut primitives are exported.
  • Trigger supports asChild.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.

Edit this page