Skip to content

Menubar 应用菜单栏

桌面应用式顶部菜单条(文件 / 编辑 / 视图),点击 / 悬停展开子菜单(级联浮出),支持方向键、Alt 访问键与焦点陷阱。

多组单选(radio 组独立勾选)

type: "group" 项的 value 作为组 id,同一组内的叶子按该组独立记录选中值;value 属性传 JSON 对象({"组id":"选中值"})时各组互不干扰——「模式」和「主题」两组可各自显示打勾。

多组单选(组独立勾选)

mode: preview, theme: dark

动作项(kind: "action")

kind: "action" 的叶子项按普通动作渲染(menuitem),无勾选态、点击不写回 value、只派发 oas-selectdetail.kind === "action")——适合「打开 / 保存 / 关于」这类非设置项。

动作项(kind: action)

value: mode(动作项点击不改变)

快捷键(shortcut)

shortcut 字段(如 "Ctrl+N"):右侧渲染快捷键提示,并自动绑定 document 级 keydown——命中即触发对应项选择(preventDefault 拦截浏览器默认行为)。

快捷键(shortcut)

按 Ctrl+N / Ctrl+O / Ctrl+S 试试

基础用法

基础用法

尚未选择

禁用项与分组

子菜单内支持 disabledtype: "divider" 分隔线与 type: "group" 分组标题。

禁用项与分组

尚未选择

受控选中

value 属性受控(已列入 observedAttributes):外部 setAttribute('value', ...) 即时生效,选中项(勾选/高亮)同步到对应叶子项;组件内部点击也会写回 value(非受控通道),宿主可监听 oas-select 自行接管。

受控选中(value 属性)

选中「新建」选中「撤销」清除选中value: -

复选与不收起(checkbox + close-on-select)

kind: "checkbox" 叶子按多选勾选(value 为 JSON 数组),点击切换勾选不收起子菜单(连续勾选场景);close-on-select="false" 让 radio/动作项选中后也保持展开。

复选与不收起(checkbox + close-on-select)

勾选集: ["grid"]

受控打开(open)

open 属性表达当前打开的顶级菜单 value("" 为全部收起)。受控属性:外部 setAttribute('open', ...) 即时打开/切换/关闭;组件内部变化会写回 open 并派发 oas-open-changedetail: { value, open }),宿主可监听接管。

受控打开(open 属性)

打开「文件」打开「编辑」收起open: -

触发方式与方向键循环(trigger / loop)

trigger="click"(缺省):顶级菜单首开用点击,一旦有菜单打开,hover 顶级项即切换(桌面应用共识);trigger="hover" 保持 hover 直开。loop="false" 关闭方向键在边界处循环。

hover 直开(trigger 配置)

hover 即开(无 click-first)

方向键不循环(loop 配置)

← 在首项、→ 在末项停止

整栏禁用(disabled)

disabled 整栏禁用:顶级项/子项点击、键盘导航、shortcut 快捷键与 Alt 访问键全部拦截。

整栏禁用(disabled)

整栏不可交互

弹出定位与箭头(side / align / offset / show-arrow)

side 控制一级下拉弹出侧(缺省 bottom)、align 对齐(缺省 start)、offset 与触发器的间距(px);show-arrow 显示指向触发器的视觉箭头。

弹出定位与箭头(side / align / offset / show-arrow)

side=top / align=end / offset=8 / show-arrow

竖排(orientation)

orientation="vertical":bar 纵向排布,一级下拉缺省向右弹出;键盘 ↑/↓ 移动顶级项、→ 打开子菜单。

竖排(orientation 配置)

移动端汉堡收纳(breakpoint)

breakpoint="600":视口宽度 ≤ 600px 时菜单栏折叠为汉堡按钮 + 弹出菜单(窄宽收纳);拉宽窗口自动恢复完整菜单栏。

移动端汉堡收纳(breakpoint)

拉窄窗口(≤600px)试试汉堡按钮

图标(icon)

顶级项与子项支持 icon 字段(图标集名),图标跟随文字色。

图标(icon)

API

属性

属性说明类型默认值
align一级下拉对齐:start(缺省)/ center / endside 为 top/bottom 时沿水平轴,为 left/right 时沿垂直轴string
breakpoint移动端断点(px,如 600):视口宽度 ≤ 断点时 bar 折叠为汉堡按钮 + 弹出菜单(窄宽收纳)string
close-on-select选中叶子项后是否收起展开的子菜单,缺省 true(桌面菜单栏共识);close-on-select="false" 保持展开(连选场景);kind:"checkbox" 项勾选切换永不收起string
disabled整栏禁用:顶级项/子项点击、键盘导航、shortcut 快捷键、Alt 访问键全部拦截,视觉降饱和boolean
items顶级菜单项 JSON(含子菜单 children)string[]
loop方向键循环导航开关,缺省 true(边界循环);显式 loop="false" 时边界停止string
offset一级下拉与触发器间距(px,缺省 4)string
open当前打开的顶级菜单 value(open="" 表示全部收起)。受控属性(observedAttributes):外部 setAttribute('open', ...) 即时打开/切换/关闭;内部点击/hover/键盘变化会写回本属性并派发 oas-open-change,宿主可监听接管string
orientation排列方向:horizontal(缺省)/ vertical(竖排:bar 纵向、一级下拉缺省向右弹、键盘上下移动顶级)
show-arrow显示弹出层指向触发器的视觉箭头
side一级下拉弹出侧:bottom(水平缺省)/ top / left / right(竖排缺省);级联子菜单不受影响string
trigger顶级菜单触发方式:click(默认,首开需点击、打开后 hover 切换——桌面应用共识)/ hover(hover 直开)
value选中值。纯字符串时全局单选(无组场景,兼容旧用法);JSON 对象字符串(如 {"mode":"preview","theme":"dark"})时按组 id 作用域独立记录——type:"group" 项的 value 作组 id;JSON 数组字符串(如 ["grid","wrap"])时为 checkbox 勾选集(kind:"checkbox" 项多选)string

事件

事件说明
oas-open-change顶级打开菜单变化,detail: { value, open }value = 当前打开顶级菜单 value,open = 是否打开)。受控 setAttribute('open') 与内部点击/hover/键盘触发都会派发(首帧不派发)
oas-select选择某项,detail: { value, kind?, checked? }kind 仅动作项(kind: "action")出现,值为 "action";checkbox 项带 checked(切换后勾选态);radio 项 detail.kind 不出现

事件 detail 说明oas-selectdetail 是组件内部对象(含 value/kind),不是原生 Event——不能 preventDefault() 或直接读原生 event.target。如需原生事件对象,在事件监听器上用外层参数(如 addEventListener('oas-select', (e) => ...)e 是 CustomEvent,e.detail 才是组件数据)。

MenubarItem 字段(继承 MenuItem):

字段说明类型
label菜单文字string
value选中值(items JSON 中声明;渲染后宿主标签上对应 data-value 小写属性,供内部定位,宿主不应依赖其作为公共 API)string
kind叶子项语义:radio(默认,可勾选、参与 value)/ action(动作项,无勾选态、点击不写回 value)string
shortcut快捷键提示(如 "Ctrl+N");渲染为右侧 kbd,并自动绑定 document 级 keydown(命中即选择该项、preventDefaultstring
accessKeyAlt 访问键(单字符);缺省取 label 首个 ASCII 字母string
disabled禁用boolean
children子菜单项(可继续嵌套,级联向右浮出)MenubarItem[]

键盘:顶级 / 切换、/Enter 打开子菜单、Esc 关闭;子菜单内 / 移动、 进入级联、 返回父级;Home/End 跳转。Alt 单独按下聚焦菜单栏,Alt + 访问键 打开对应顶级菜单。子菜单打开时 Tab 在子项间循环(焦点陷阱),roving tabindex 只保留当前顶级项可 Tab 到达。

基于 MIT OR Apache-2.0 双许可发布