Dropdown Menu

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

Default

tsx

import {
  Button,
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuItem,
  DropdownMenuSeparator,
} from "@hummingbirdui/react";

export default function DropdownDefault() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button>Open menu</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="min-w-48">
        <DropdownMenuLabel>My account</DropdownMenuLabel>
        <DropdownMenuItem>Profile</DropdownMenuItem>
        <DropdownMenuItem>Settings</DropdownMenuItem>
        <DropdownMenuItem>Billing</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem>Sign out</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Groups

DropdownMenuGroup bundles related items under a DropdownMenuLabel section header.

tsx

import {
  Button,
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuLabel,
  DropdownMenuItem,
  DropdownMenuSeparator,
} from "@hummingbirdui/react";

export default function DropdownGroups() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button>Workspace</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="min-w-56">
        <DropdownMenuGroup>
          <DropdownMenuLabel>Documents</DropdownMenuLabel>
          <DropdownMenuItem>New file</DropdownMenuItem>
          <DropdownMenuItem>Import</DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          <DropdownMenuLabel>Team</DropdownMenuLabel>
          <DropdownMenuItem>Invite member</DropdownMenuItem>
          <DropdownMenuItem>Manage roles</DropdownMenuItem>
        </DropdownMenuGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Placement

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

tsx

import {
  Button,
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
} from "@hummingbirdui/react";

export default function DropdownPlacement() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button>Aligned menu</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent side="top" align="end" className="min-w-48">
        <DropdownMenuItem>Move up</DropdownMenuItem>
        <DropdownMenuItem>Move down</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem>Duplicate</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Disabled

Use disabled to prevent a DropdownMenuItem from being selected.

tsx

import {
  Button,
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
} from "@hummingbirdui/react";

export default function DropdownDisabled() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button>Actions</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="min-w-48">
        <DropdownMenuItem>Edit</DropdownMenuItem>
        <DropdownMenuItem>Share</DropdownMenuItem>
        <DropdownMenuItem disabled>Archive</DropdownMenuItem>
        <DropdownMenuItem disabled>Delete</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Non-interactive text

DropdownMenuItemText displays non-interactive text in a menu.

tsx

import {
  Button,
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuItem,
  DropdownMenuItemText,
  DropdownMenuSeparator,
} from "@hummingbirdui/react";

export default function DropdownItemText() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button>Details</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="min-w-56">
        <DropdownMenuLabel>Signed in as</DropdownMenuLabel>
        <DropdownMenuItemText>sohel@onesuite.io</DropdownMenuItemText>
        <DropdownMenuSeparator />
        <DropdownMenuItem>Account settings</DropdownMenuItem>
        <DropdownMenuItem>Sign out</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

API Reference

For detailed usage guidelines, see the Radix UI documentation.

DropdownMenuItemText renders non-interactive copy as a <span> and accepts a className.

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.
PreviousDrawerNextList Group