Dropdown

Account

Contract

Overview

Machine-readable contract from Component Spec.

component: dropdownexport: Dropdownversion: 1attributes: data-refineui=dropdown-menu

Anatomy

Part	data-refineui
root	dropdown-menu-root
dropdown_item	dropdown-item
group	dropdown-menu-group
label	dropdown-menu-label
separator	dropdown-menu-separator
shortcut	dropdown-menu-shortcut

States

Scope	Category	Values
component	pseudo	focus-visible
component	component	data-state: pressed, selected, open
component	environment	forced-colors, dir

Accessibility

Slot	Element	Role
dropdown-menu	div	menu
dropdown-item	div	menuitem

Keyboard

Key	Action	Native
Escape	close	—
Enter	activate	true
Space	activate	true

Focus

Section	Property	Value
visual	required	true
visual	selector	:focus-visible

Layout

Property	Value
direction	logical
rtl	true

Installation

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

Usage

import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem, Button } from "@refineui/react";

<Dropdown>
  <DropdownTrigger>
    <Button>Options</Button>
  </DropdownTrigger>
  <DropdownContent>
    <DropdownItem onSelect={() => handleEdit()}>Edit</DropdownItem>
    <DropdownItem onSelect={() => handleDelete()}>Delete</DropdownItem>
    <DropdownItem disabled>Disabled</DropdownItem>
  </DropdownContent>
</Dropdown>

<Dropdown>
  <DropdownTrigger>
    <Button>More</Button>
  </DropdownTrigger>
  <DropdownContent align="end" side="bottom">
    <DropdownItem selected>Active Item</DropdownItem>
    <DropdownSubTrigger>Submenu</DropdownSubTrigger>
    <DropdownSubContent>
      <DropdownItem>Submenu Item</DropdownItem>
    </DropdownSubContent>
  </DropdownContent>
</Dropdown>

API Reference

Dropdown

Root component (manages open state).

DropdownTrigger

Trigger element that opens the dropdown.

DropdownContent

Prop	Default	Type	Description
align	"start"	"start" | "end" | "center"	Alignment relative to trigger.
side	"auto"	"auto" | "top" | "bottom"	Preferred side.
sideOffset	4	number	Gap between trigger and panel (pixels).

DropdownItem

Prop	Default	Type	Description
selected	false	boolean	Shows selected state.
disabled	false	boolean	Disables this item.

DropdownSubTrigger

Submenu trigger item (shows chevron).

DropdownSubContent

Submenu panel.