Dropdown Menu

<DropdownMenu>
<DropdownMenu.Trigger render={<Button icon={PlusIcon}>Add</Button>} />
<DropdownMenu.Content>
  <DropdownMenu.Item>Worker</DropdownMenu.Item>
  <DropdownMenu.Item>Pages</DropdownMenu.Item>
  <DropdownMenu.Item>KV Namespace</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu>

Installation

Barrel

import { DropdownMenu } from "@cloudflare/kumo";

Granular

import { DropdownMenu } from "@cloudflare/kumo/components/dropdown";

Usage

import { DropdownMenu, Button } from "@cloudflare/kumo";

export default function Example() {
return (
  <DropdownMenu>
    <DropdownMenu.Trigger render={<Button>Menu</Button>} />
    <DropdownMenu.Content>
      <DropdownMenu.Item>Option 1</DropdownMenu.Item>
      <DropdownMenu.Item>Option 2</DropdownMenu.Item>
    </DropdownMenu.Content>
  </DropdownMenu>
);
}

Examples

<DropdownMenu>
<DropdownMenu.Trigger render={<Button icon={PlusIcon}>Add</Button>} />
<DropdownMenu.Content>
  <DropdownMenu.Item>Worker</DropdownMenu.Item>
  <DropdownMenu.Item>Pages</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu>

Checkbox Items

Use DropdownMenu.CheckboxItem for toggleable options that can be independently checked or unchecked.

<DropdownMenu>

<DropdownMenu.Trigger render={<Button>View Options</Button>} />
<DropdownMenu.Content>
  <DropdownMenu.Group>
    <DropdownMenu.Label>Display</DropdownMenu.Label>
    <DropdownMenu.CheckboxItem
      checked={showSidebar}
      onCheckedChange={setShowSidebar}
    >
      Show sidebar
    </DropdownMenu.CheckboxItem>
    <DropdownMenu.CheckboxItem
      checked={showLineNumbers}
      onCheckedChange={setShowLineNumbers}
    >
      Show line numbers
    </DropdownMenu.CheckboxItem>
  </DropdownMenu.Group>
</DropdownMenu.Content>
</DropdownMenu>

Use DropdownMenu.Sub, DropdownMenu.SubTrigger, and DropdownMenu.SubContent to create nested submenus. For single-selection lists like language or timezone, use DropdownMenu.RadioGroup and DropdownMenu.RadioItem.

<DropdownMenu>

<DropdownMenu.Trigger render={<Button icon={UserIcon}>Account</Button>} />
<DropdownMenu.Content>
  <DropdownMenu.Item icon={UserIcon}>Profile</DropdownMenu.Item>
  <DropdownMenu.Item icon={CreditCardIcon}>Billing</DropdownMenu.Item>
  <DropdownMenu.Item icon={MoonIcon}>Dark mode</DropdownMenu.Item>

  {/* Language submenu with RadioGroup */}
  <DropdownMenu.Sub>
    <DropdownMenu.SubTrigger>Language</DropdownMenu.SubTrigger>
    <DropdownMenu.SubContent>
      <DropdownMenu.Group>
        <DropdownMenu.RadioGroup value="en">
          <DropdownMenu.RadioItem value="en">
            English
            <DropdownMenu.RadioItemIndicator />
          </DropdownMenu.RadioItem>
          <DropdownMenu.RadioItem value="es">
            Español
            <DropdownMenu.RadioItemIndicator />
          </DropdownMenu.RadioItem>
          {/* ... more languages */}
        </DropdownMenu.RadioGroup>
      </DropdownMenu.Group>
    </DropdownMenu.SubContent>
  </DropdownMenu.Sub>

  {/* Timezone submenu with RadioGroup */}
  <DropdownMenu.Sub>
    <DropdownMenu.SubTrigger>Set Timezone</DropdownMenu.SubTrigger>
    <DropdownMenu.SubContent>
      <DropdownMenu.Group>
        <DropdownMenu.RadioGroup value="America/Los_Angeles">
          <DropdownMenu.RadioItem value="America/Los_Angeles">
            Pacific Time (PT)
            <DropdownMenu.RadioItemIndicator />
          </DropdownMenu.RadioItem>
          <DropdownMenu.RadioItem value="America/New_York">
            Eastern Time (ET)
            <DropdownMenu.RadioItemIndicator />
          </DropdownMenu.RadioItem>
          {/* ... more timezones */}
        </DropdownMenu.RadioGroup>
      </DropdownMenu.Group>
    </DropdownMenu.SubContent>
  </DropdownMenu.Sub>

  <DropdownMenu.Separator />
  <DropdownMenu.Item icon={SignOutIcon} variant="danger">
    Log out
  </DropdownMenu.Item>

</DropdownMenu.Content>
</DropdownMenu>

Use DropdownMenu.LinkItem for menu items that navigate to a URL. This renders a semantic <a> element with full control over link attributes like target and rel.

<DropdownMenu>

<DropdownMenu.Trigger render={<Button>Resources</Button>} />
<DropdownMenu.Content>
  <DropdownMenu.LinkItem href="/settings" icon={GearIcon}>
    Settings
  </DropdownMenu.LinkItem>
  <DropdownMenu.LinkItem href="/docs" icon={BookOpenIcon}>
    Documentation
  </DropdownMenu.LinkItem>
  <DropdownMenu.Separator />
  <DropdownMenu.LinkItem
    href="https://developers.cloudflare.com"
    target="_blank"
    icon={ArrowSquareOutIcon}
  >
    Developer Docs
  </DropdownMenu.LinkItem>
</DropdownMenu.Content>
</DropdownMenu>

API Reference

DropdownMenu

Root component that manages the dropdown state.

Prop	Type	Default	Description
variant	`"default" \| "danger"`	`"default"`	Visual style of the dropdown item. - `"default"` — Standard item appearance - `"danger"` — Destructive action with red text