Playground

DropdownMenu

overlay

control

Contextual actions menu

Dropdown list of options and commands

Rounded-xl container with rounded-md items

import { DropdownMenu } from "@everydayos/ui";

Usage

Dropdown menu with actions

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">Actions</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Edit</DropdownMenuItem>
    <DropdownMenuItem>Duplicate</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem className="text-destructive">Delete</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Composition

Pairs well with

Button

Separator

When to avoid

Need form select — use Select instead
Need navigation — use NavigationMenu instead