Downcity
Components

DropdownMenu

Use for contextual actions, grouped commands, and lightweight menus

DropdownMenu

DropdownMenu is for grouped, lower-priority actions.

Import

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  Button,
} from "@downcity/ui";

Basic Example

import {
  Button,
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
} from "@downcity/ui";

export function AgentMenu() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button size="sm" variant="ghost" />}>
        More
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuGroup>
          <DropdownMenuItem>Rename</DropdownMenuItem>
          <DropdownMenuItem>
            Copy ID
            <DropdownMenuShortcut>⌘C</DropdownMenuShortcut>
          </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Available Building Blocks

  • DropdownMenuItem
  • DropdownMenuGroup
  • DropdownMenuLabel
  • DropdownMenuSeparator
  • DropdownMenuShortcut
  • DropdownMenuCheckboxItem
  • DropdownMenuRadioGroup
  • DropdownMenuRadioItem
  • DropdownMenuSub
  • DropdownMenuSubTrigger
  • DropdownMenuSubContent

Usage Notes

  • Use variant="destructive" for destructive actions
  • Group similar commands with DropdownMenuGroup
  • Avoid putting long forms into a dropdown menu