Overlays

Dropdown menu

Presents a compact set of contextual actions from a trigger control.

@dawn/ui/components/dropdown-menu

Preview

Rendered from @dawn/ui

Usage

import { Button } from "@dawn/ui/components/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@dawn/ui/components/dropdown-menu";

export const MoreActions = () => (
  <DropdownMenu>
    <DropdownMenuTrigger asChild>
      <Button variant="outline">More</Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent align="end">
      <DropdownMenuItem>Edit</DropdownMenuItem>
      <DropdownMenuItem>Archive</DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
);

API

DropdownMenuTriggerRadix DropdownMenu.Trigger props: Opens the menu and supports an asChild trigger.
DropdownMenuContentRadix DropdownMenu.Content props: Renders the positioned menu surface in a portal.
DropdownMenuItemRadix DropdownMenu.Item props: Renders an accessible selectable action.

Exports

DropdownMenuDropdownMenuContentDropdownMenuItemDropdownMenuSeparatorDropdownMenuTrigger