ChoisSTANDARD UI컴포넌트 검색 /

Actions

Dropdown

semantic HTML

트리거 주변에 작업 메뉴를 표시합니다.

stablefreeSince 0.2

Live example

Project actions 
<details data-standard-component="dropdown">
  <span data-slot="trigger">Project actions</span>
  <button type="button" role="menuitem">Rename</button>
  <button type="button" role="menuitem">Duplicate</button>
  <button type="button" role="menuitem">Archive</button>
</div>

Variants and sizes

The pattern inherits theme and density tokens. Use compact, comfortable, or roomy density when the surrounding screen requires it.

compactcomfortableroomy

Public API

ContractValue
Implementationsemantic HTML
Statusstable
Licensefree
Since0.2
HTML contractNative HTML elements and attributes
EventsNative browser events

Accessibility

트리거의 확장 상태를 보조 기술에 제공하며 방향키, Home, End, Escape와 Tab 종료를 지원합니다.

Server template guidance

<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->