Skip to content
Overlays

DropdownMenu

A list of commands that opens from a button: row actions, More menus, view options.

import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent } from "@flinbu/seed";

Items, submenu, checkbox and radio rows

Destructive items go last, after a separator.

import { Button, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "@flinbu/seed";
import { Copy, Ellipsis, Pencil, Share, Trash2 } from "lucide-react";

const [dark, setDark] = React.useState(true);
const [sort, setSort] = React.useState("name");

<DropdownMenu>
  <DropdownMenuTrigger asChild><Button variant="secondary" icon={<Ellipsis />} aria-label="Token actions" /></DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>bg-accent-solid</DropdownMenuLabel>
    <DropdownMenuItem icon={<Pencil />} shortcut="R">Rename</DropdownMenuItem>
    <DropdownMenuItem icon={<Copy />} shortcut="⌘D">Duplicate</DropdownMenuItem>
    <DropdownMenuSub>
      <DropdownMenuSubTrigger icon={<Share />}>Copy as</DropdownMenuSubTrigger>
      <DropdownMenuSubContent>
        <DropdownMenuItem>CSS variable</DropdownMenuItem>
        <DropdownMenuItem>Tailwind class</DropdownMenuItem>
        <DropdownMenuItem>Hex value</DropdownMenuItem>
      </DropdownMenuSubContent>
    </DropdownMenuSub>
    <DropdownMenuSeparator />
    <DropdownMenuCheckboxItem checked={dark} onCheckedChange={setDark}>Show Dark value</DropdownMenuCheckboxItem>
    <DropdownMenuRadioGroup value={sort} onValueChange={setSort}>
      <DropdownMenuRadioItem value="name">Sort by name</DropdownMenuRadioItem>
      <DropdownMenuRadioItem value="uses">Sort by uses</DropdownMenuRadioItem>
    </DropdownMenuRadioGroup>
    <DropdownMenuSeparator />
    <DropdownMenuItem icon={<Trash2 />} destructive>Delete</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Use it for

  • Actions on one thing (rename, duplicate, delete).
  • Checkbox and radio rows for view options.

Use something else for

  • Picking a form value: use Select.
  • Navigation: use links.

Props

PropTypeDefaultDescription
DropdownMenuItem: iconIconProp–Leading icon. An element like <Search /> (works in server components) or, in client components, the component itself.
DropdownMenuItem: shortcutReactNode–Shown at the end, like ⌘D.
DropdownMenuItem: destructiveboolean–Red, for deleting.
DropdownMenuItem: onSelect(e: Event) => void–Runs the command; the menu closes.
DropdownMenuContent: align / side'start''center''end' / Side'start' / 'bottom'Placement; flips to stay on screen.

Accessibility

  • Built on Radix DropdownMenu: role menu, arrow keys, typeahead, Escape returns focus to the trigger.
  • Shortcuts are only shown; wire them yourself.