Dropdown Menu · @behivetech · Behive Tech Registry

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.

Playground

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 />);