Dropdown Menu

A toggleable menu of actions or links, anchored to a trigger and positioned by Radix UI.

Default

tsx

import { Button, Dropdown } from "@hummingbirdui/react";

export default function DropdownDefault() {
  return (
    <Dropdown>
      <Dropdown.Trigger asChild>
        <Button>Open menu</Button>
      </Dropdown.Trigger>
      <Dropdown.Content className="min-w-48">
        <Dropdown.Label>My account</Dropdown.Label>
        <Dropdown.Item>Profile</Dropdown.Item>
        <Dropdown.Item>Settings</Dropdown.Item>
        <Dropdown.Item>Billing</Dropdown.Item>
        <Dropdown.Separator />
        <Dropdown.Item>Sign out</Dropdown.Item>
      </Dropdown.Content>
    </Dropdown>
  );
}

Groups

Dropdown.Group bundles related items under a Dropdown.Label section header.

tsx

import { Button, Dropdown } from "@hummingbirdui/react";

export default function DropdownGroups() {
  return (
    <Dropdown>
      <Dropdown.Trigger asChild>
        <Button>Workspace</Button>
      </Dropdown.Trigger>
      <Dropdown.Content className="min-w-56">
        <Dropdown.Group>
          <Dropdown.Label>Documents</Dropdown.Label>
          <Dropdown.Item>New file</Dropdown.Item>
          <Dropdown.Item>Import</Dropdown.Item>
        </Dropdown.Group>
        <Dropdown.Separator />
        <Dropdown.Group>
          <Dropdown.Label>Team</Dropdown.Label>
          <Dropdown.Item>Invite member</Dropdown.Item>
          <Dropdown.Item>Manage roles</Dropdown.Item>
        </Dropdown.Group>
      </Dropdown.Content>
    </Dropdown>
  );
}

Placement

The side and align props on Dropdown.Content control where the menu opens relative to its trigger.

tsx

import { Button, Dropdown } from "@hummingbirdui/react";

export default function DropdownPlacement() {
  return (
    <Dropdown>
      <Dropdown.Trigger asChild>
        <Button>Aligned menu</Button>
      </Dropdown.Trigger>
      <Dropdown.Content side="top" align="end" className="min-w-48">
        <Dropdown.Item>Move up</Dropdown.Item>
        <Dropdown.Item>Move down</Dropdown.Item>
        <Dropdown.Separator />
        <Dropdown.Item>Duplicate</Dropdown.Item>
      </Dropdown.Content>
    </Dropdown>
  );
}

Disabled

Use disabled to prevent a Dropdown.Item from being selected.

tsx

import { Button, Dropdown } from "@hummingbirdui/react";

export default function DropdownDisabled() {
  return (
    <Dropdown>
      <Dropdown.Trigger asChild>
        <Button>Actions</Button>
      </Dropdown.Trigger>
      <Dropdown.Content className="min-w-48">
        <Dropdown.Item>Edit</Dropdown.Item>
        <Dropdown.Item>Share</Dropdown.Item>
        <Dropdown.Item disabled>Archive</Dropdown.Item>
        <Dropdown.Item disabled>Delete</Dropdown.Item>
      </Dropdown.Content>
    </Dropdown>
  );
}

Non-interactive text

Dropdown.ItemText displays non-interactive text in a menu.

tsx

import { Button, Dropdown } from "@hummingbirdui/react";

export default function DropdownItemText() {
  return (
    <Dropdown>
      <Dropdown.Trigger asChild>
        <Button>Details</Button>
      </Dropdown.Trigger>
      <Dropdown.Content className="min-w-56">
        <Dropdown.Label>Signed in as</Dropdown.Label>
        <Dropdown.ItemText>sohel@onesuite.io</Dropdown.ItemText>
        <Dropdown.Separator />
        <Dropdown.Item>Account settings</Dropdown.Item>
        <Dropdown.Item>Sign out</Dropdown.Item>
      </Dropdown.Content>
    </Dropdown>
  );
}

API Reference

Built on the Radix UI Dropdown Menu primitive. Each part forwards all props to its Radix counterpart.

Contains all the parts of a dropdown menu.

Prop	Type	Default
`defaultOpen`	`boolean`	—
`open`	`boolean`	—
`onOpenChange`	`function`	—
`modal`	`boolean`	`true`
`dir`	`enum`	—

Dropdown.Trigger

The button that toggles the dropdown menu. By default, the Dropdown.Content will position itself against the trigger.

Prop	Type	Default
`asChild`	`boolean`	`false`
`className`	`string`	—

Data attribute	Values
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	Present when disabled

Dropdown.Portal

When used, portals the content part into the body.

Prop	Type	Default
`forceMount`	`boolean`	—
`container`	`HTMLElement`	`document.body`

Dropdown.Content

The component that pops out when the dropdown menu is open. Hummingbird renders it inside a portal automatically, so wrapping it in a Dropdown.Portal is not required.

Prop	Type	Default
`asChild`	`boolean`	`false`
`loop`	`boolean`	`false`
`onCloseAutoFocus`	`function`	—
`onEscapeKeyDown`	`function`	—
`onPointerDownOutside`	`function`	—
`onFocusOutside`	`function`	—
`onInteractOutside`	`function`	—
`forceMount`	`boolean`	—
`side`	`enum`	`"bottom"`
`sideOffset`	`number`	`4`
`align`	`enum`	`"center"`
`alignOffset`	`number`	`0`
`avoidCollisions`	`boolean`	`true`
`collisionBoundary`	`Boundary`	`[]`
`collisionPadding`	`number \| Padding`	`0`
`arrowPadding`	`number`	`0`
`sticky`	`enum`	`"partial"`
`hideWhenDetached`	`boolean`	`false`
`className`	`string`	—

Data attribute	Values
`[data-state]`	`"open" \| "closed"`
`[data-side]`	`"left" \| "right" \| "bottom" \| "top"`
`[data-align]`	`"start" \| "end" \| "center"`
`[data-orientation]`	`"vertical" \| "horizontal"`

CSS Variable	Description
`--radix-dropdown-menu-content-transform-origin`	The `transform-origin` computed from the content and arrow positions/offsets.
`--radix-dropdown-menu-content-available-width`	The remaining width between the trigger and the boundary edge.
`--radix-dropdown-menu-content-available-height`	The remaining height between the trigger and the boundary edge.
`--radix-dropdown-menu-trigger-width`	The width of the trigger.
`--radix-dropdown-menu-trigger-height`	The height of the trigger.

Dropdown.Group

Used to group multiple Dropdown.Items.

Prop	Type	Default
`asChild`	`boolean`	`false`
`className`	`string`	—

Dropdown.Item

The component that contains the dropdown menu items.

Prop	Type	Default
`asChild`	`boolean`	`false`
`disabled`	`boolean`	—
`onSelect`	`function`	—
`textValue`	`string`	—
`className`	`string`	—

Data attribute	Values
`[data-orientation]`	`"vertical" \| "horizontal"`
`[data-highlighted]`	Present when highlighted
`[data-disabled]`	Present when disabled

Dropdown.Label

Used to render a label. It won't be focusable using arrow keys.

Prop	Type	Default
`asChild`	`boolean`	`false`
`className`	`string`	—

Dropdown.Separator

Used to visually separate items in the dropdown menu.

Prop	Type	Default
`asChild`	`boolean`	`false`
`className`	`string`	—

Dropdown.ItemText

Renders non-interactive text inside the menu as a <span>. This is a Hummingbird addition with no Radix counterpart; it accepts all standard <span> props.

Styling

Hummingbird React dropdown is styled entirely through Hummingbird's utility classes and CSS variables.

See the full list of available dropdown classes in the Class overview.
Visit the CSS Variables documentation to explore all available variables.

PreviousDrawer NextList Group