Menu 菜单

基于 BrConfigProvider 全局主题配置的菜单组件，复刻 shadcn-vue 设计体系，支持多级嵌套、快捷键标注和键盘导航。本组件主要用于实现上下文菜单（Right-click Context Menu）。

核心特性

• 主题适配：深度集成 BrConfigProvider，支持 CSS 变量配置背景、前景、圆角、阴影等。
• 多级嵌套：支持无限层级的子菜单嵌套。
• 键盘导航：完整支持 Tab、Arrow Up/Down/Left/Right、Enter、Esc 等键位操作。
• 快捷键：支持菜单项快捷键标注。
• 分组分隔：支持菜单分组和分隔线。
• 边界检测：自动调整弹出位置，防止溢出视口。

基础用法

最简单的上下文菜单，包含几个基本操作。

Right click here

Example

复杂菜单

支持分组、图标、快捷键和多级嵌套的复杂上下文菜单，效果如图所示。

Right-click in this area (Right click here)

Example

多级嵌套子菜单

支持使用 BrMenuSub 创建多级子菜单。

Right click for Submenu

Example

带快捷键标注

使用 shortcut 插槽或属性展示快捷键。

Right click for Shortcuts

Example

主题定制

BrMenu 基于 BrConfigProvider 的 CSS 变量进行样式定制。

通过 BrConfigProvider 全局配置 Menu 的圆角、背景色、阴影等。

Right click (Dark Theme Menu)

Example

API 参考

BrMenu (Root)

属性	类型	默认值	说明
dir	'ltr' | 'rtl'	-	阅读方向

BrMenuTrigger

属性	类型	默认值	说明
disabled	boolean	false	是否禁用触发器

BrMenuContent

属性	类型	默认值	说明
loop	boolean	false	键盘导航是否循环
alignOffset	number	-	对齐偏移量

BrMenuItem

属性	类型	默认值	说明
disabled	boolean	false	是否禁用
inset	boolean	false	是否留出左侧图标空间
shortcut	string	-	快捷键文本

BrMenuSub

属性	类型	默认值	说明
defaultOpen	boolean	false	默认是否展开
open	boolean	-	受控展开状态