DropdownMenu

한눈에#

트리거 버튼 + 실행 가능한 액션 메뉴(WAI-ARIA menu button)입니다 — 열리면 첫 항목으로 포커스, 화살표 순환 탐색, 선택 시 실행 후 닫힙니다.

트리거를 눌러 화살표 탐색·선택 실행을 직접 확인하세요:

사용 시점#

트리거로 실행 가능한 액션 목록을 펼치면 DropdownMenu — 폼 값 선택·임의 패널·명령 팔레트는 다른 컴포넌트입니다.

플레이그라운드#

컨트롤로 props를 조작하면 미리보기와 코드가 실시간 갱신됩니다.

import { DropdownMenu } from '@wds/ui-web';

<DropdownMenu
  trigger='메뉴'
  items={[
    { value: 'rename', label: '이름 변경' },
    { value: 'duplicate', label: '복제' },
    { value: 'delete', label: '삭제', danger: true },
  ]}
/>

변형#

• danger — 파괴적 액션 변형, color.error-text 잉크
• disabled — 네이티브 disabled — 포커스 탐색이 건너뜀

• group — 같은 group을 공유하는 연속 항목 앞에 비대화형 섹션 헤더(role="presentation")를 렌더 — 헤더는 menuitem이 아니라 키보드 탐색에서 건너뜁니다
• leadingIcon — 라벨 앞 장식 아이콘(aria-hidden)
• trailingText — 라벨 우측 보조 텍스트(키보드 숏컷 등), muted·우측 정렬

크기#

단일 크기입니다 — 트리거 높이 control.height-md(44px), 메뉴 최소 폭 11rem.

상태#

• 열림 — 트리거 aria-expanded="true" + 메뉴 렌더, 첫 활성 항목 포커스
• 항목 hover/focus — color.surface-hover 배경 (트리거 열림 상태만 surface-selected)
• Focus — 트리거 :focus-visible에 2px color.focus-ring 아웃라인

선택하면 onSelect?.(value) 호출 후 메뉴가 닫히고 트리거로 포커스가 복귀합니다.

Props#

DropdownMenuItem#

접근성#

트리거가 aria-haspopup="menu" + aria-expanded + aria-controls, 팝업이 role="menu"(트리거 aria-labelledby 연결) + role="menuitem" 항목입니다. group 섹션 헤더는 role="presentation"이라 menuitem이 아니며, 화살표·Home/End 탐색에서 자연히 건너뜁니다. leadingIcon·trailingText는 aria-hidden이라 항목 접근명은 label만 사용됩니다.

외부 클릭(mousedown)으로도 닫히며, 항목은 tabIndex={-1}로 화살표 탐색만 허용합니다(menu button 패턴).

토큰#

component 토큰 없이 semantic을 직접 소비합니다(신설 기준 §4 미충족).