Behive Tech Component Registry

Dropdown Menu

v0.3.0Stable

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

Edit the code and the preview updates as you type. Every registry export is in scope — DropdownMenu from this package, plus React hooks and every other component in the registry.

PlaygroundOpen in new tab
const siteItems = [
  { id: "site-1", label: "My Behive Site" },
  { id: "site-2", label: "Second Site" },
  { id: "site-3", label: "Archived Site", disabled: true },
];

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

  return (
    <DropdownMenu
      trigger={<button type="button">{selectedLabel} ▾</button>}
      items={siteItems}
      onSelect={setSelected}
    />
  );
};

render(<BasicDropdownMenu />);