Dropdown Menu

A menu that appears from a trigger element, commonly used for action menus and contextual options.

Basic Usage

Use DropdownMenu for action menus triggered by buttons. The three-dot icon is commonly used for row actions in tables.

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuLabel,
  DropdownMenuShortcut,
  Button,
} from "@epilot/volt-ui"
import { IconDotsVertical, IconPencil, IconCopy, IconTrash } from "@tabler/icons-react"

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="tertiary" size="icon-sm">
      <IconDotsVertical />
    </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>Actions</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>
      <IconPencil />
      Edit
      <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>
    </DropdownMenuItem>
    <DropdownMenuItem>
      <IconCopy />
      Duplicate
    </DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem destructive>
      <IconTrash />
      Delete
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

With Checkboxes

Use checkbox items for toggling options.

const [showStatus, setShowStatus] = useState(true)
const [showActivity, setShowActivity] = useState(false)

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="secondary">View Options</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>Toggle Columns</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuCheckboxItem
      checked={showStatus}
      onCheckedChange={setShowStatus}
    >
      Status
    </DropdownMenuCheckboxItem>
    <DropdownMenuCheckboxItem
      checked={showActivity}
      onCheckedChange={setShowActivity}
    >
      Activity
    </DropdownMenuCheckboxItem>
  </DropdownMenuContent>
</DropdownMenu>

With Radio Items

Use radio items for single selection from a group.

const [sortBy, setSortBy] = useState("date")

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="secondary">Sort By</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>Sort Order</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuRadioGroup value={sortBy} onValueChange={setSortBy}>
      <DropdownMenuRadioItem value="date">Date</DropdownMenuRadioItem>
      <DropdownMenuRadioItem value="name">Name</DropdownMenuRadioItem>
      <DropdownMenuRadioItem value="amount">Amount</DropdownMenuRadioItem>
    </DropdownMenuRadioGroup>
  </DropdownMenuContent>
</DropdownMenu>