Kumo

@cloudflare/kumo

Dropdown Menu

Displays a menu to the user—such as a set of actions or functions—triggered by a button.

<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

import { DropdownMenu } from "~/components/dropdown/dropdown";

Usage

import { DropdownMenu } from "~/components/dropdown/dropdown";
import { Button } from "~/components/button/button";

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

Basic Dropdown

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