Dropdown Menu

v0.4.1
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

You are viewing Dropdown Menu v0.4.1, snapshotted 2026-11-10. The latest is v0.4.2. Go to the latest →

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.

Usage

1import { DropdownMenu } from "@behivetech/atoms.dropdown-menu";
2import { Button } from "@behivetech/atoms.button";
3

4function Example() {
5  const items = [
6    { id: "edit", label: "Edit" },
7    { id: "duplicate", label: "Duplicate" },
8    { id: "delete", label: "Delete", disabled: true },
9  ];
10  return (
11    <DropdownMenu
12      trigger={<Button variant="secondary">Actions</Button>}
13      items={items}
14      onSelect={(id) => alert(id)}
15    />
16  );
17}

Examples

Open all 2 →
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 />);

Properties

DropdownMenu props

PropTypeDefaultDescription
items*DropdownMenuItem[]—Items rendered in the menu
onSelect*(id: string) => void—Called with the selected item's id when an item is chosen
trigger*ReactNode—Element that opens the menu when activated — receives the trigger's props via Radix's `asChild`
align"start" | "center" | "end"startAlignment of the menu relative to the trigger; defaults to "start"
classNamestring—Additional class names to merge with the menu content element
onOpenChange((open: boolean) => void)—Called when the open state changes (trigger click, item select, outside click, Escape)
openboolean—Controlled open state