DropdownMenu

Default

Actions

import { DropdownMenu } from '@eekodigital/raster';

<DropdownMenu.Root>
  <DropdownMenu.Trigger>
    {(props) => <Button variant="secondary" {...props}>Actions</Button>}
  </DropdownMenu.Trigger>
  <DropdownMenu.Portal>
    <DropdownMenu.Content>
      <DropdownMenu.Item>Edit</DropdownMenu.Item>
      <DropdownMenu.Item>Duplicate</DropdownMenu.Item>
      <DropdownMenu.Separator />
      <DropdownMenu.Item>Delete</DropdownMenu.Item>
    </DropdownMenu.Content>
  </DropdownMenu.Portal>
</DropdownMenu.Root>

With labels and sections

More options

<DropdownMenu.Content>
  <DropdownMenu.Label>Project</DropdownMenu.Label>
  <DropdownMenu.Item>Settings</DropdownMenu.Item>
  <DropdownMenu.Item>Archive</DropdownMenu.Item>
  <DropdownMenu.Separator />
  <DropdownMenu.Label>Danger zone</DropdownMenu.Label>
  <DropdownMenu.Item>Delete project</DropdownMenu.Item>
</DropdownMenu.Content>