下拉菜单与语言切换

点击按钮弹出一组操作或选项。表单中的「选择一个值」请用下拉选择。

语言切换

页头右侧，收起时只显示简写（简 / 繁 / EN）。

examples/dropdown/locale-switcher.html

• 语言选项使用 role="menuitemradio" + aria-checked，对勾由 group-aria-checked:opacity-100 显示
• 每个语言选项加 lang 属性，读屏会用对应语言朗读
• 选择后派发 cb:dropdown-select，detail = { value, item }；选项用 <a href="?lang=en"> 时直接跳转即可

操作菜单

examples/dropdown/actions.html

• 分隔线：<div role="separator" class="-mx-1 my-1 h-px bg-border">
• 危险操作放在最后、分隔线之后，使用 text-destructive

结构与交互

<div class="relative" data-cb-dropdown>
  <button type="button" data-cb-dropdown-trigger aria-haspopup="menu">…</button>
  <div role="menu" data-cb-dropdown-menu hidden
       class="absolute top-full right-0 z-50 mt-1.5 w-40 rounded-lg border border-border bg-popover p-1 shadow-lg">
    <button type="button" role="menuitem" class="flex w-full … rounded-md px-2.5 py-2 text-sm hover:bg-accent focus-visible:bg-accent">编辑</button>
  </div>
</div>

键盘	结果
在按钮上按 ↓ / ↑	打开并聚焦当前选中项 / 最后一项
↑ ↓ Home End	在菜单项间移动
Enter / Space	选择
Esc	关闭并把焦点还给按钮
Tab / 点击外部	关闭

使用建议

推荐

• 菜单项不超过 7 个，文案用动词
• 菜单靠右对齐触发按钮（right-0），避免超出屏幕

避免

• 把页面主要操作藏进「更多」菜单
• 菜单里放输入框等复杂控件

无障碍

• 只有图标的触发按钮必须带 aria-label（「更多操作」「切换语言」）
• aria-expanded、aria-controls 由脚本维护

与 v2 的差异

v2 现状	规范
LocaleSwitcher 用 role="listbox"，不支持方向键	Menu Button 模式，完整键盘支持
关闭后焦点丢失	Esc / 选择后焦点回到按钮
菜单圆角 rounded-md，多选面板 rounded-lg	浮层统一 rounded-lg，菜单项 rounded-md