Menu

Demo

Features

• トリガー起点のオーバーレイ + アクション項目リスト。Root / Trigger / Indicator / Positioner / Content / Arrow / ArrowTip / Item / ItemText / ItemIndicator / ItemGroup / ItemGroupLabel / Separator / TriggerItem / ContextTrigger / CheckboxItem / RadioItemGroup / RadioItem の 18 anatomy パーツを持つ（menu.rs モジュール doc。ItemText/ItemIndicator はイシュー #1651 で参考サイト〔ark-ui/Radix Primitives/chakra-ui〕と突合し追加）。
• 各パーツ関数は呼び出し側 attrs に含まれる固定属性キー（data-state/role/aria-* 等）を除去してから合成する（drop_reserved、イシュー #1651）。id/aria-labelledby/aria-controls のような Option 引数経由の正規キーは除去対象に含まない。
• サブメニューは親 Menu インスタンスの content 内に子 Menu インスタンス由来の TriggerItem/Positioner/Content を入れ子で配置して表現し、親子双方に aria-haspopup="menu" を付与する（「haspopup 連鎖」でネストを支援技術へ伝える）。
• CheckboxItem/RadioItemGroup は Menu の開閉状態とは独立した checked 状態機械（MenuCheckboxItem/MenuRadioItemGroup、Checkable/SingleSelect を埋め込む）を持つ。
• ContextTrigger は右クリック起点のトリガーであり、ARIA 属性を一切付与しない（右クリックは SSR/no-JS では成立せず、ARIA を付けると JS なしで実現できない操作性を誤って約束するため）。
• 開閉は Disclosure を埋め込んだ状態機械 Menu が管理する（dispatch は "open"/"close"/"toggle"）。
• 参考サイトとの意図的な差分（イシュー #1651）: Portal（DOM 配置）/ data-placement・data-side・data-align の positioner 集約 / data-orientation（content・item）/ chakra ItemCommand（ショートカット表示）/ asChild はいずれも非採用。キーボードは trigger にフォーカスを留めたまま aria-activedescendant + data-highlighted で仮想フォーカスを表現する設計（#583）のため、Escape 後の「trigger へのフォーカス復帰」は構造的に不要で、Tab は無配線（zag は Tab で閉じるが本実装は閉じない）。
• checkbox-item/radio-item は crates/wasm-full/src/keynav.rs の highlight・typeahead・Enter/Space の click 合成対象に含まれ、crates/wasm-full/src/headless.rs::MAPPING_TABLE の対応行（"toggle"/"select"）を経由して MenuCheckboxItem/MenuRadioItemGroup へ dispatch される（イシュー #2205 で配線済み）。checked 状態の aria-checked/data-state への DOM 反映は wire_headless_component の on_update で呼び出し側が行う契約のまま。

API Reference

Arguments

Data Attributes

Examples

ItemGroup を使わない単純な Item 列

ItemGroup/Separator を省き、Item のみを並べた最小構成です。

CheckboxItem/RadioItem + ItemIndicator/ItemText

ItemIndicator/ItemText（イシュー #1651 で追加）を CheckboxItem・RadioItemGroup と組み合わせる例です。

自前 CSS の最小例

data-scope/data-part 属性セレクタで自前 CSS を当てる最小例です。headless-ui 自体はスタイルを持ちません。

[data-scope="menu"][data-part="positioner"][hidden],
[data-scope="menu"][data-part="content"][hidden],
[data-scope="menu"][data-part="item-indicator"][hidden] {
  display: none;
}
[data-scope="menu"][data-part="item"][data-highlighted] {
  background: #eff6ff;
}
[data-scope="menu"][data-part="item"][data-disabled] {
  color: #9ca3af;
}
[data-scope="menu"][data-part="checkbox-item"][data-state="checked"] {
  font-weight: 600;
}

Accessibility

Keyboard Interactions

WAI-ARIA