Dropdown

A context menu that appears on trigger activation, built on Base UI's Menu primitive.

Overview

Dropdown is a compound component that renders a floating list of actions anchored to a trigger element. Use it for contextual actions such as edit, duplicate, and delete, or for a list of commands associated with a specific item.

Composed with a compound API: Dropdown, Dropdown.Trigger, Dropdown.Content, Dropdown.Item
Keyboard navigation with arrow keys; Escape closes the menu.
Items support a prefix slot for a leading icon.
Supports both controlled (open + onOpenChange) and uncontrolled (defaultOpen) usage.

Guidelines

Use Dropdown for contextual actions associated with a specific item — edit, duplicate, delete.
For navigation menus or content selection, use Select or Tab instead.
Keep the menu to 3–7 items for best usability.

Accessibility

Uses role="menu" and role="menuitem" for proper ARIA semantics.
Arrow Down / Arrow Up navigates between items.
Enter or Space activates the focused item.
Escape closes the menu and returns focus to the trigger.
Type-ahead is supported — pressing a character focuses the first item whose label starts with that character.
The trigger element receives aria-expanded and aria-haspopup="menu" attributes.

Import

import { Dropdown } from "@cocso-ui/react";

Default

A dropdown menu triggered by an icon button, containing labeled action items.

"use client";

import { Button, Dropdown } from "@cocso-ui/react";
import { ContentCopyIcon, DeleteIcon, MoreHorizIcon, PencilIcon } from "@cocso-ui/react-icons";

export default function DropdownDefault() {
  return (
    <div className="p-4">
      <Dropdown>
        <Dropdown.Trigger render={<Button variant="secondary" svgOnly />}>
          <MoreHorizIcon size={18} />
        </Dropdown.Trigger>
        <Dropdown.Content>
          <Dropdown.Item prefix={<PencilIcon size={16} />}>Edit</Dropdown.Item>
          <Dropdown.Item prefix={<ContentCopyIcon size={16} />}>Duplicate</Dropdown.Item>
          <Dropdown.Item prefix={<DeleteIcon size={16} />}>Delete</Dropdown.Item>
        </Dropdown.Content>
      </Dropdown>
    </div>
  );
}

Prefix Icon

Pass an icon node to the prefix prop of Dropdown.Item to render a leading icon before the label.

API Reference

Dropdown (Root Container)

Prop	Type	Default	Description
`open`	`boolean`	-	Controlled open state. Use together with `onOpenChange` for programmatic menu control.
`onOpenChange`	`(open: boolean) => void`	-	Callback invoked when the menu should open or close. Receives the new boolean state.
`defaultOpen`	`boolean`	`false`	Initial open state for uncontrolled usage.

Dropdown.Trigger

Prop	Type	Default	Description
`render*`	`ReactElement`	-	The element to render as the menu trigger. Receives click handler and `aria-expanded`/`aria-haspopup` via prop merging.

Dropdown.Content

Prop	Type	Default	Description
`side`	`"top" \| "bottom" \| "left" \| "right"`	`"bottom"`	Preferred placement side relative to the trigger. The menu auto-flips if there is insufficient space.
`align`	`"start" \| "center" \| "end"`	`"start"`	Alignment of the menu along the trigger edge. `start` aligns to the leading edge, `end` to the trailing edge.
`sideOffset`	`number`	`4`	Distance in pixels between the trigger and the menu panel.

Dropdown.Item

Prop	Type	Default	Description
`prefix`	`ReactNode`	-	Element rendered before the item label, typically a 16px icon. Use for visual identification of the action.
`onClick`	`() => void`	-	Callback invoked when the item is selected via click or keyboard activation.
`disabled`	`boolean`	`false`	Prevents interaction with the item. Disabled items are visually dimmed and skipped during keyboard navigation.