Dropdown Menu

v0.4.2
Stable

A trigger that opens a list of selectable items, built on Radix's DropdownMenu for focus management, keyboard navigation and close on outside click or Escape.

pnpm add @behivetech/atoms.dropdown-menu

This is the snapshot of v0.4.2, the current version, as recorded on 2026-11-10. The live page runs its examples →

Examples of v0.4.2 are shown as code; only the latest version runs live. Open the live examples →

Basic Dropdown Menu
1const siteItems = [
2  { id: "site-1", label: "My BEhive Site" },
3  { id: "site-2", label: "Second Site" },
4  { id: "site-3", label: "Archived Site", disabled: true },
5];
6

7const BasicDropdownMenu = () => {
8  const [selected, setSelected] = useState("site-1");
9  const selectedLabel = siteItems.find((item) => item.id === selected)?.label;
10

11  return (
12    <DropdownMenu
13      trigger={<button type="button">{selectedLabel} ▾</button>}
14      items={siteItems}
15      onSelect={setSelected}
16    />
17  );
18};
19

20render(<BasicDropdownMenu />);
Controlled Dropdown Menu
1const siteItems = [
2  { id: "site-1", label: "My BEhive Site" },
3  { id: "site-2", label: "Second Site" },
4  { id: "site-3", label: "Archived Site", disabled: true },
5];
6

7const ControlledDropdownMenu = () => {
8  const [open, setOpen] = useState(false);
9  const [selected, setSelected] = useState("site-1");
10  const selectedLabel = siteItems.find((item) => item.id === selected)?.label;
11

12  return (
13    <>
14      <p>Selected: {selectedLabel}</p>
15      <DropdownMenu
16        trigger={<button type="button">Toggle menu</button>}
17        items={siteItems}
18        open={open}
19        onOpenChange={setOpen}
20        onSelect={(id) => {
21          setSelected(id);
22          setOpen(false);
23        }}
24      />
25    </>
26  );
27};
28

29render(<ControlledDropdownMenu />);