# DropdownMenu

> A menu of actions for one object, opening from a button; 250ms in from 97%, 150ms out to 99%.

## Facts

- **Product**: Max
- **Family**: Overlays
- **Global**: `window.DigitalCrew.DropdownMenu`
- **Source**: `max-agent: src/components/ui/dropdown-menu.tsx`
- **Import in the app**: `import { DropdownMenu } from "@/components/ui/dropdown-menu";`
- **Live preview**: /design/components/dropdown-menu/preview.html
- **Page**: /design/components/dropdown-menu

## Guidelines

**Use it for** row and page overflow actions ("…"), account menus and bulk actions. Navigation belongs in the sidebar or tabs; a choice of value belongs in a [**Select**](/design/components/select.md).

**What you provide**: a `DropdownMenuTrigger` (a ghost `icon-sm` Button with `MoreHorizontal` for overflow), `DropdownMenuContent` with `DropdownMenuItem`s (16px icon first, `DropdownMenuShortcut` last), `DropdownMenuLabel`, `DropdownMenuSeparator`, checkbox and radio items, and sub-menus. Put the destructive item last with `variant="destructive"`, after a separator.

Items are 14px on `accent` when focused; `inset` aligns items without icons with those that have one.

## API

```ts
declare function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>): any;
declare function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>): any;
declare function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): any;
declare function DropdownMenuContent({ className, sideOffset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>): any;
declare function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>): any;
declare function DropdownMenuItem({ className, inset, variant, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
    inset?: boolean;
    variant?: "default" | "destructive";
}): any;
declare function DropdownMenuCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>): any;
declare function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): any;
declare function DropdownMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>): any;
declare function DropdownMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
    inset?: boolean;
}): any;
declare function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>): any;
declare function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">): any;
declare function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>): any;
declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
    inset?: boolean;
}): any;
declare function DropdownMenuSubContent({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>): any;
export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };
```

## Example

```html
<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
function App() {
  return h("div", { className: "flex justify-center pt-2" },
    h(DC.DropdownMenu, { defaultOpen: true, modal: false },
      h(DC.DropdownMenuTrigger, { asChild: true }, h(DC.Button, { variant: "outline" }, "Actions", h(I.ChevronRight, { className: "rotate-90" }))),
      h(DC.DropdownMenuContent, { className: "w-56", align: "center" },
        h(DC.DropdownMenuLabel, null, "Campaign"),
        h(DC.DropdownMenuGroup, null,
          h(DC.DropdownMenuItem, null, h(I.Pencil), "Edit steps", h(DC.DropdownMenuShortcut, null, "E")),
          h(DC.DropdownMenuItem, null, h(I.Copy), "Duplicate", h(DC.DropdownMenuShortcut, null, "⌘D")),
          h(DC.DropdownMenuCheckboxItem, { checked: true }, "Stop on reply")),
        h(DC.DropdownMenuSeparator, null),
        h(DC.DropdownMenuItem, { variant: "destructive" }, h(I.Trash2), "Delete campaign"))));
}
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>
```

## More in Overlays

- [AlertDialog](/design/components/alert-dialog.md): A blocking confirmation for irreversible or costly actions; same motion and surface as **Dialog**, no close ×, no click-outside dismissal.
- [Command](/design/components/command.md): A keyboard-first search-and-act list (cmdk); the ⌘K menu and the core of every searchable picker.
- [ConfirmDialogProvider](/design/components/confirm-dialog-provider.md): App-wide confirmations through one hook: wrap the app in `ConfirmDialogProvider`, then call `useConfirm().confirm({...})` anywhere.
- [Dialog](/design/components/dialog.md): A modal for focused tasks that need an answer before going on; opens in 250ms from 96% scale and closes in 150ms (`.t-modal`).
- [DiscardChangesDialog](/design/components/discard-changes-dialog.md): An alert dialog that asks the user to confirm throwing away unsaved edits.
- [Drawer](/design/components/drawer.md): A panel that slides in from the bottom edge (or any edge), built on vaul, with a drag handle and swipe-to-dismiss.
- [Popover](/design/components/popover.md): A light panel anchored to its trigger; opens in 250ms from 97% scale (`.t-dropdown`).
- [Sheet](/design/components/sheet.md): A panel that slides in from an edge; opens in 400ms and closes in 350ms on the smooth-out ease (`--panel-*`).
- [Tooltip](/design/components/tooltip.md): A short ink label on hover or focus: `foreground` fill with `background` text, 12px, 150ms in after an 80ms delay, 50ms out (`.t-tt`).