顶部菜单栏 MenuBar

Menubar 是一个桌面风格的水平菜单栏组件，非常适合用于构建应用程序级菜单导航，比如类似 macOS 的顶部菜单、文件管理器菜单、富文本编辑器的工具栏等。

---

📦 引入方式

import {
  Menubar,
  MenubarCheckboxItem,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarSeparator,
  MenubarShortcut,
  MenubarSub,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarTrigger,
} from '@npmqg/react-ui-menubar';

---

🧩 使用示例

示例

源码

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        New Tab <MenubarShortcut>⌘T</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>
        New Window <MenubarShortcut>⌘N</MenubarShortcut>
      </MenubarItem>
      <MenubarItem disabled>New Incognito Window</MenubarItem>
      <MenubarSeparator />
      <MenubarSub>
        <MenubarSubTrigger>Share</MenubarSubTrigger>
        <MenubarSubContent>
          <MenubarItem>Email link</MenubarItem>
          <MenubarItem>Messages</MenubarItem>
          <MenubarItem>Notes</MenubarItem>
        </MenubarSubContent>
      </MenubarSub>
      <MenubarSeparator />
      <MenubarItem>
        Print... <MenubarShortcut>⌘P</MenubarShortcut>
      </MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>Edit</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        Undo <MenubarShortcut>⌘Z</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>
        Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
      </MenubarItem>
      <MenubarSeparator />
      <MenubarSub>
        <MenubarSubTrigger>Find</MenubarSubTrigger>
        <MenubarSubContent>
          <MenubarItem>Search the web</MenubarItem>
          <MenubarSeparator />
          <MenubarItem>Find...</MenubarItem>
          <MenubarItem>Find Next</MenubarItem>
          <MenubarItem>Find Previous</MenubarItem>
        </MenubarSubContent>
      </MenubarSub>
      <MenubarSeparator />
      <MenubarItem>Cut</MenubarItem>
      <MenubarItem>Copy</MenubarItem>
      <MenubarItem>Paste</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>View</MenubarTrigger>
    <MenubarContent>
      <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
      <MenubarCheckboxItem checked>Always Show Full URLs</MenubarCheckboxItem>
      <MenubarSeparator />
      <MenubarItem inset>
        Reload <MenubarShortcut>⌘R</MenubarShortcut>
      </MenubarItem>
      <MenubarItem disabled inset>
        Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
      </MenubarItem>
      <MenubarSeparator />
      <MenubarItem inset>Toggle Fullscreen</MenubarItem>
      <MenubarSeparator />
      <MenubarItem inset>Hide Sidebar</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>Profiles</MenubarTrigger>
    <MenubarContent>
      <MenubarRadioGroup value="benoit">
        <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
        <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
        <MenubarRadioItem value="Luis">Luis</MenubarRadioItem>
      </MenubarRadioGroup>
      <MenubarSeparator />
      <MenubarItem inset>Edit...</MenubarItem>
      <MenubarSeparator />
      <MenubarItem inset>Add Profile...</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

---

🧩 Props

组件名	主要属性/Props	用法说明
Menubar	asChild, className	菜单栏容器，通常作为一组 MenubarMenu 的包裹元素。
MenubarMenu	—	单个菜单项组容器，必须嵌套 MenubarTrigger 与 MenubarContent。
MenubarTrigger	asChild, className, disabled	菜单的触发器按钮，点击后显示对应的 MenubarContent。
MenubarContent	align, sideOffset, className	显示菜单项的容器，可通过 align 控制对齐方式，如 "start", "center", "end"。
MenubarItem	onSelect, disabled, inset, className	普通菜单项，常用于点击执行某个操作。支持快捷键等附加元素。
MenubarShortcut	className	菜单项右侧的快捷键提示文本，一般嵌套于 MenubarItem 中。
MenubarSeparator	className	菜单项间的分隔线，无交互。用于逻辑分组。
MenubarCheckboxItem	checked, onCheckedChange, disabled, inset	复选菜单项，可勾选/取消勾选。
MenubarRadioGroup	value, onValueChange	单选项的容器，配合多个 MenubarRadioItem 使用。
MenubarRadioItem	value, disabled, inset	单选项，用于选择某一项。必须位于 MenubarRadioGroup 中。
MenubarSub	—	子菜单项容器，用于嵌套结构。需与 MenubarSubTrigger 和 MenubarSubContent 配合使用。
MenubarSubTrigger	inset, disabled, className	触发子菜单的菜单项。
MenubarSubContent	className, align, sideOffset	子菜单的内容容器，显示嵌套菜单项。

---

📦 依赖项

• @radix-ui/react-menubar 是一个由 Radix UI 提供的 低级 UI 组件库，它实现了一个完全可访问（accessible）、**无样式（unstyled）**的“菜单栏（Menubar）”组件，专为 React 应用构建桌面风格的导航菜单。

---

✅ 常见使用场景

使用场景	示例	说明
桌面应用导航栏（Web App）	文件、编辑、视图、帮助	模拟系统菜单栏，提供快捷入口
富文本编辑器工具栏	字体、字号、对齐方式	可嵌套子菜单、单选/多选等
开发者工具导航	项目、终端、构建	支持快捷键显示、菜单项分组
浏览器插件菜单	设置、账户、外观主题	弹出式菜单嵌套功能丰富
音乐播放器菜单	播放、播放列表、设置	控制播放方式、音效等
文件管理器菜单栏	新建、导出、打印	类似桌面软件的用户体验