Dropdown

Account

계약

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

설치

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

사용법

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 레퍼런스

Dropdown

루트 컴포넌트(열림 상태 관리).

DropdownTrigger

드롭다운을 여는 트리거 요소.

DropdownContent

Prop	Default	Type	Description
align	"start"	"start" | "end" | "center"	트리거 기준 정렬.
side	"auto"	"auto" | "top" | "bottom"	선호하는 쪽.
sideOffset	4	number	트리거와 패널 사이 간격(픽셀).

DropdownItem

Prop	Default	Type	Description
selected	false	boolean	선택 상태를 표시합니다.
disabled	false	boolean	이 항목을 비활성화합니다.

DropdownSubTrigger

서브메뉴 트리거 항목(셰브론 표시).

DropdownSubContent

서브메뉴 패널.