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>

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