# 菜单 Menu

分类：浮层 · React：DropdownMenu

一列操作：更多、导出、排序；支持子菜单、单选组、勾选项。

## 示例
```html
<button class="xxd-btn" data-xxd-menu="m1">更多<i data-xxd-icon="ChevronDown" data-size="14"></i></button>
<div class="xxd-menu" id="m1" role="menu" popover>
  <button class="xxd-menu__item" role="menuitem"><i data-xxd-icon="Pen" data-size="14"></i>重命名<span class="xxd-menu__kbd">F2</span></button>
  <button class="xxd-menu__item" role="menuitem" data-submenu="m1-export" aria-haspopup="menu"><i data-xxd-icon="Download" data-size="14"></i>导出为</button>
  <div class="xxd-menu" id="m1-export" role="menu" popover="manual">
    <button class="xxd-menu__item" role="menuitem">Markdown</button>
    <button class="xxd-menu__item" role="menuitem">图片（PNG）</button>
  </div>
  <div class="xxd-menu__sep" role="separator"></div>
  <div class="xxd-menu__label">排序</div>
  <div role="group" aria-label="排序">
    <button class="xxd-menu__item" role="menuitemradio" aria-checked="true">最新在前</button>
    <button class="xxd-menu__item" role="menuitemradio" aria-checked="false">最早在前</button>
  </div>
  <button class="xxd-menu__item" role="menuitemcheckbox" aria-checked="true">智能标点</button>
  <div class="xxd-menu__sep" role="separator"></div>
  <button class="xxd-menu__item" role="menuitem" data-tone="danger"><i data-xxd-icon="Trash2" data-size="14"></i>删除</button>
</div>
```

## 属性与类名
- 类名：`xxd-menu` `xxd-menu__item` `xxd-menu__label` `xxd-menu__sep` `xxd-menu__kbd`

## JS
```js
group.addEventListener("xxd:change", (e) => e.detail.value)  // 单选组
```

## 键盘与读屏
- 触发按钮 aria-haspopup + aria-expanded；↓ ↑ 打开并聚焦第一 / 最后一项
- ↑ ↓ 移动，→ 进子菜单，← / Esc 退出，焦点回到触发按钮

## 规则
- 方向键 / Home / End / Esc；点外面关闭（Popover API）
- 子菜单放在父菜单里面，popover="manual"；→ 打开、← / Esc 回到父项
- 鼠标移进哪一项焦点就在哪一项（只有一个高亮）