Menubar 菜单栏
为桌面式应用组织文件、编辑等常驻顶层命令菜单。
使用概览
适合使用
- 应用具有大量分层命令并遵循桌面软件菜单习惯时。
不建议使用
- 普通营销网站或移动界面只有少量页面导航时。
真实示例
文件命令菜单栏
以桌面菜单习惯组织新建与导出命令。
正在加载示例…
安装
本地候选警告Registry 地址仅指向当前本地文档站；npm 包也只用于本地候选验证，尚未公开发布。
pnpm dlx shadcn@4.16.0 add http://127.0.0.1:3000/r/menubar.json基础用法
导入
import { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem } from "@richardqiu/quartz/menubar";JSX
<Menubar><MenubarMenu><MenubarTrigger>文件</MenubarTrigger><MenubarContent><MenubarItem>新建</MenubarItem><MenubarItem>导出</MenubarItem></MenubarContent></MenubarMenu></Menubar>状态与控制摘要
默认
键盘焦点可见
已打开
已关闭
已勾选
已禁用
label · textactive · booleanAPI 参考
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
value | string | "" | 受控指定当前处于打开状态的顶层菜单值。 |
组合结构
- 01
Menubar - 02
MenubarMenu - 03
MenubarTrigger - 04
MenubarContent - 05
MenubarItem
键盘约定
- 方向键按 menubar 模式遍历触发器与菜单项，Enter 或空格键打开，Escape 关闭并恢复焦点。
可访问性契约
- Radix 暴露 menubar、menu、item、check 与 radio 语义。
- 快捷键文字只作说明，不会注册全局按键处理器。