bloomkit

Dropdown

A floating menu anchored to a trigger element. Built on Radix UI's DropdownMenu primitive with Bloom's surface styling and smooth open/close animations.

Usage

import { Dropdown, DropdownItem, DropdownSeparator } from "@bloomkit/react";
 
<Dropdown trigger={<Button variant="secondary">Open menu</Button>}>
  <DropdownItem onSelect={() => console.log("profile")}>Profile</DropdownItem>
  <DropdownItem onSelect={() => console.log("settings")}>Settings</DropdownItem>
  <DropdownSeparator />
  <DropdownItem onSelect={() => console.log("logout")}>Log out</DropdownItem>
</Dropdown>

With Separator

Use DropdownSeparator to group related items visually:

<Dropdown trigger={<Button variant="secondary">Actions</Button>}>
  <DropdownItem onSelect={() => {}}>Edit</DropdownItem>
  <DropdownItem onSelect={() => {}}>Duplicate</DropdownItem>
  <DropdownSeparator />
  <DropdownItem onSelect={() => {}}>Delete</DropdownItem>
</Dropdown>

Disabled Item

Pass disabled to prevent interaction on a specific item:

<Dropdown trigger={<Button variant="secondary">Options</Button>}>
  <DropdownItem onSelect={() => {}}>Available action</DropdownItem>
  <DropdownItem disabled onSelect={() => {}}>Unavailable action</DropdownItem>
</Dropdown>

Dropdown Props

PropTypeDefaultDescription
triggerReactNode—The element that opens the dropdown when clicked
childrenReactNode—DropdownItem and DropdownSeparator elements
classNamestring""Additional Tailwind classes applied to the menu content

DropdownItem Props

PropTypeDefaultDescription
onSelect() => void—Callback fired when the item is selected
disabledbooleanfalsePrevents the item from being selected
classNamestring""Additional Tailwind classes
childrenReactNode—Item label content