Dropdown Menu

Usage

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@epilot/spark-ui/dropdown-menu'

<DropdownMenu>
  <DropdownMenuTrigger
    render={
      <Button styleVariant="surface" color="neutral">
        Actions
      </Button>
    }
  />
  <DropdownMenuContent>
    <DropdownMenuItem>{/* … */}</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Examples

Checkbox and radio items

API Reference

Built on Base UI Menu. See the Base UI docs for the full API. Spark additions:

• DropdownMenuItem takes variant: "default" | "destructive"; inset for alignment under indicators.
• DropdownMenuContent renders its own portal; align="start" and sideOffset={4} defaults; container for iframe portals; height-capped and scrollable.
• DropdownMenuCheckboxItem / DropdownMenuRadioItem: trailing check indicator; inset.
• DropdownMenuShortcut: right-aligned hint text.