Menubar 应用菜单

用于应用菜单场景的 MoriUI 组件。

导入

import { Menubar, MenubarArrow, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarItemIndicator, MenubarLabel, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger } from 'moriui'

示例

概览

应用菜单栏展示菜单层级。

<script setup lang="ts">
  import {
    Menubar,
    MenubarContent,
    MenubarGroup,
    MenubarItem,
    MenubarMenu,
    MenubarSeparator,
    MenubarShortcut,
    MenubarSub,
    MenubarSubContent,
    MenubarSubTrigger,
    MenubarTrigger
  } from 'moriui'
</script>

<template>
  <Menubar class="w-72">
    <MenubarMenu>
      <MenubarTrigger>文件</MenubarTrigger>
      <MenubarContent>
        <MenubarGroup>
          <MenubarItem>
            新建标签页
            <MenubarShortcut>⌘T</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            新建窗口
            <MenubarShortcut>⌘N</MenubarShortcut>
          </MenubarItem>
          <MenubarItem disabled>
            新建无痕窗口
          </MenubarItem>
        </MenubarGroup>
        <MenubarSeparator />
        <MenubarGroup>
          <MenubarSub>
            <MenubarSubTrigger>分享</MenubarSubTrigger>
            <MenubarSubContent>
              <MenubarItem>邮件链接</MenubarItem>
              <MenubarItem>即时消息</MenubarItem>
              <MenubarItem>备忘录</MenubarItem>
            </MenubarSubContent>
          </MenubarSub>
        </MenubarGroup>
        <MenubarSeparator />
        <MenubarGroup>
          <MenubarItem>
            打印…
            <MenubarShortcut>⌘P</MenubarShortcut>
          </MenubarItem>
        </MenubarGroup>
      </MenubarContent>
    </MenubarMenu>
    <MenubarMenu>
      <MenubarTrigger>编辑</MenubarTrigger>
      <MenubarContent>
        <MenubarGroup>
          <MenubarItem>
            撤销
            <MenubarShortcut>⌘Z</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            重做
            <MenubarShortcut>⇧⌘Z</MenubarShortcut>
          </MenubarItem>
        </MenubarGroup>
        <MenubarSeparator />
        <MenubarGroup>
          <MenubarSub>
            <MenubarSubTrigger>查找</MenubarSubTrigger>
            <MenubarSubContent>
              <MenubarItem>搜索网页</MenubarItem>
              <MenubarSeparator />
              <MenubarItem>查找…</MenubarItem>
              <MenubarItem>查找下一个</MenubarItem>
              <MenubarItem>查找上一个</MenubarItem>
            </MenubarSubContent>
          </MenubarSub>
        </MenubarGroup>
        <MenubarSeparator />
        <MenubarGroup>
          <MenubarItem>剪切</MenubarItem>
          <MenubarItem>复制</MenubarItem>
          <MenubarItem>粘贴</MenubarItem>
        </MenubarGroup>
      </MenubarContent>
    </MenubarMenu>
    <MenubarMenu>
      <MenubarTrigger>视图</MenubarTrigger>
      <MenubarContent class="w-44">
        <MenubarGroup>
          <MenubarItem inset>
            重新加载
          </MenubarItem>
          <MenubarItem disabled inset>
            强制重新加载
          </MenubarItem>
        </MenubarGroup>
        <MenubarSeparator />
        <MenubarGroup>
          <MenubarItem inset>
            切换全屏
          </MenubarItem>
        </MenubarGroup>
        <MenubarSeparator />
        <MenubarGroup>
          <MenubarItem inset>
            隐藏侧边栏
          </MenubarItem>
        </MenubarGroup>
      </MenubarContent>
    </MenubarMenu>
    <MenubarMenu>
      <MenubarTrigger>帮助</MenubarTrigger>
      <MenubarContent>
        <MenubarGroup>
          <MenubarItem>
            搜索命令
            <MenubarShortcut>⌘/</MenubarShortcut>
          </MenubarItem>
        </MenubarGroup>
        <MenubarSeparator />
        <MenubarGroup>
          <MenubarItem>关于 MoriUI</MenubarItem>
          <MenubarItem>版本说明</MenubarItem>
        </MenubarGroup>
      </MenubarContent>
    </MenubarMenu>
  </Menubar>
</template>

图标

为菜单项添加图标。

<script setup lang="ts">
  import {
    File,
    Folder,
    HelpCircle,
    Save,
    Settings,
    Trash2
  } from '@lucide/vue'
  import {
    Menubar,
    MenubarContent,
    MenubarGroup,
    MenubarItem,
    MenubarMenu,
    MenubarSeparator,
    MenubarShortcut,
    MenubarTrigger
  } from 'moriui'
</script>

<template>
  <Menubar class="w-72">
    <MenubarMenu>
      <MenubarTrigger>文件</MenubarTrigger>
      <MenubarContent>
        <MenubarItem>
          <File class="size-4" />
          新建文件
          <MenubarShortcut>⌘N</MenubarShortcut>
        </MenubarItem>
        <MenubarItem>
          <Folder class="size-4" />
          打开文件夹
        </MenubarItem>
        <MenubarSeparator />
        <MenubarItem>
          <Save class="size-4" />
          保存
          <MenubarShortcut>⌘S</MenubarShortcut>
        </MenubarItem>
      </MenubarContent>
    </MenubarMenu>
    <MenubarMenu>
      <MenubarTrigger>更多</MenubarTrigger>
      <MenubarContent>
        <MenubarGroup>
          <MenubarItem>
            <Settings class="size-4" />
            设置
          </MenubarItem>
          <MenubarItem>
            <HelpCircle class="size-4" />
            帮助
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem>
            <Trash2 class="size-4" />
            删除
          </MenubarItem>
        </MenubarGroup>
      </MenubarContent>
    </MenubarMenu>
  </Menubar>
</template>

复选项

CheckboxItem 支持多选状态。

<script setup lang="ts">
  import { shallowRef } from 'vue'
  import {
    Menubar,
    MenubarCheckboxItem,
    MenubarContent,
    MenubarItem,
    MenubarMenu,
    MenubarSeparator,
    MenubarShortcut,
    MenubarTrigger
  } from 'moriui'

  const showBookmarksBar = shallowRef(true)
  const showFullUrls = shallowRef(false)
  const showStrikethrough = shallowRef(true)
  const showCode = shallowRef(false)
  const showSuperscript = shallowRef(false)
</script>

<template>
  <Menubar class="w-72">
    <MenubarMenu>
      <MenubarTrigger>视图</MenubarTrigger>
      <MenubarContent class="w-64">
        <MenubarCheckboxItem v-model="showBookmarksBar">
          显示书签栏
        </MenubarCheckboxItem>
        <MenubarCheckboxItem v-model="showFullUrls">
          显示完整网址
        </MenubarCheckboxItem>
        <MenubarSeparator />
        <MenubarItem inset>
          重新加载
          <MenubarShortcut>⌘R</MenubarShortcut>
        </MenubarItem>
        <MenubarItem disabled inset>
          强制重新加载
          <MenubarShortcut>⇧⌘R</MenubarShortcut>
        </MenubarItem>
      </MenubarContent>
    </MenubarMenu>
    <MenubarMenu>
      <MenubarTrigger>格式</MenubarTrigger>
      <MenubarContent>
        <MenubarCheckboxItem v-model="showStrikethrough">
          删除线
        </MenubarCheckboxItem>
        <MenubarCheckboxItem v-model="showCode">
          代码
        </MenubarCheckboxItem>
        <MenubarCheckboxItem v-model="showSuperscript">
          上标
        </MenubarCheckboxItem>
      </MenubarContent>
    </MenubarMenu>
  </Menubar>
</template>

单选项

RadioItem 与 RadioGroup 管理唯一选择。

<script setup lang="ts">
  import { shallowRef } from 'vue'
  import {
    Menubar,
    MenubarContent,
    MenubarGroup,
    MenubarItem,
    MenubarMenu,
    MenubarRadioGroup,
    MenubarRadioItem,
    MenubarSeparator,
    MenubarTrigger
  } from 'moriui'

  const profile = shallowRef('benoit')
  const theme = shallowRef('system')
</script>

<template>
  <Menubar class="w-72">
    <MenubarMenu>
      <MenubarTrigger>个人资料</MenubarTrigger>
      <MenubarContent>
        <MenubarRadioGroup v-model="profile">
          <MenubarRadioItem value="andy">
            Andy
          </MenubarRadioItem>
          <MenubarRadioItem value="benoit">
            Benoit
          </MenubarRadioItem>
          <MenubarRadioItem value="luis">
            Luis
          </MenubarRadioItem>
        </MenubarRadioGroup>
        <MenubarSeparator />
        <MenubarGroup>
          <MenubarItem inset>
            编辑…
          </MenubarItem>
          <MenubarItem inset>
            添加资料…
          </MenubarItem>
        </MenubarGroup>
      </MenubarContent>
    </MenubarMenu>
    <MenubarMenu>
      <MenubarTrigger>主题</MenubarTrigger>
      <MenubarContent>
        <MenubarRadioGroup v-model="theme">
          <MenubarRadioItem value="light">
            浅色
          </MenubarRadioItem>
          <MenubarRadioItem value="dark">
            深色
          </MenubarRadioItem>
          <MenubarRadioItem value="system">
            跟随系统
          </MenubarRadioItem>
        </MenubarRadioGroup>
      </MenubarContent>
    </MenubarMenu>
  </Menubar>
</template>

子菜单

Sub、SubTrigger 与 SubContent 构建多级菜单。

<script setup lang="ts">
  import {
    Menubar,
    MenubarContent,
    MenubarItem,
    MenubarMenu,
    MenubarSeparator,
    MenubarShortcut,
    MenubarSub,
    MenubarSubContent,
    MenubarSubTrigger,
    MenubarTrigger
  } from 'moriui'
</script>

<template>
  <Menubar class="w-72">
    <MenubarMenu>
      <MenubarTrigger>文件</MenubarTrigger>
      <MenubarContent>
        <MenubarSub>
          <MenubarSubTrigger>分享</MenubarSubTrigger>
          <MenubarSubContent>
            <MenubarItem>邮件链接</MenubarItem>
            <MenubarItem>即时消息</MenubarItem>
            <MenubarItem>备忘录</MenubarItem>
          </MenubarSubContent>
        </MenubarSub>
        <MenubarSeparator />
        <MenubarItem>
          打印…
          <MenubarShortcut>⌘P</MenubarShortcut>
        </MenubarItem>
      </MenubarContent>
    </MenubarMenu>
    <MenubarMenu>
      <MenubarTrigger>编辑</MenubarTrigger>
      <MenubarContent>
        <MenubarItem>
          撤销
          <MenubarShortcut>⌘Z</MenubarShortcut>
        </MenubarItem>
        <MenubarItem>
          重做
          <MenubarShortcut>⇧⌘Z</MenubarShortcut>
        </MenubarItem>
        <MenubarSeparator />
        <MenubarSub>
          <MenubarSubTrigger>查找</MenubarSubTrigger>
          <MenubarSubContent>
            <MenubarItem>查找…</MenubarItem>
            <MenubarItem>查找下一个</MenubarItem>
            <MenubarItem>查找上一个</MenubarItem>
          </MenubarSubContent>
        </MenubarSub>
        <MenubarSeparator />
        <MenubarItem>剪切</MenubarItem>
        <MenubarItem>复制</MenubarItem>
        <MenubarItem>粘贴</MenubarItem>
      </MenubarContent>
    </MenubarMenu>
  </Menubar>
</template>

RTL

菜单在 RTL 上下文中的定位。

<script setup lang="ts">
  import {
    DirectionProvider,
    Menubar,
    MenubarContent,
    MenubarGroup,
    MenubarItem,
    MenubarMenu,
    MenubarSeparator,
    MenubarShortcut,
    MenubarTrigger
  } from 'moriui'
</script>

<template>
  <DirectionProvider dir="rtl">
    <Menubar class="w-72">
      <MenubarMenu>
        <MenubarTrigger>ملف</MenubarTrigger>
        <MenubarContent>
          <MenubarGroup>
            <MenubarItem>
              علامة تبويب جديدة
              <MenubarShortcut>⌘T</MenubarShortcut>
            </MenubarItem>
            <MenubarItem>
              نافذة جديدة
              <MenubarShortcut>⌘N</MenubarShortcut>
            </MenubarItem>
            <MenubarItem disabled>
              نافذة التصفح المتخفي
            </MenubarItem>
          </MenubarGroup>
          <MenubarSeparator />
          <MenubarGroup>
            <MenubarItem>
              طباعة…
              <MenubarShortcut>⌘P</MenubarShortcut>
            </MenubarItem>
          </MenubarGroup>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>تعديل</MenubarTrigger>
        <MenubarContent>
          <MenubarGroup>
            <MenubarItem>
              تراجع
              <MenubarShortcut>⌘Z</MenubarShortcut>
            </MenubarItem>
            <MenubarItem>
              إعادة
              <MenubarShortcut>⇧⌘Z</MenubarShortcut>
            </MenubarItem>
          </MenubarGroup>
          <MenubarSeparator />
          <MenubarGroup>
            <MenubarItem>قص</MenubarItem>
            <MenubarItem>نسخ</MenubarItem>
            <MenubarItem>لصق</MenubarItem>
          </MenubarGroup>
          <MenubarSeparator />
          <MenubarGroup>
            <MenubarItem>
              تسجيل الخروج
              <MenubarShortcut>⇧⌘Q</MenubarShortcut>
            </MenubarItem>
          </MenubarGroup>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  </DirectionProvider>
</template>

使用说明

组合方式

Menubar 由 Menu、Trigger 和 Content 组成，支持 Item、CheckboxItem、RadioItem、Separator、Label、Sub 和 Shortcut。

子菜单

Sub、SubTrigger 与 SubContent 构建多级嵌套菜单。

复选与单选

CheckboxItem 和 RadioItem 使用 Indicator 表达选中状态；RadioGroup 管理单项选择。

RTL

方向由 DirectionProvider 控制。

变体

MenubarContent 的 side、align 来自 Reka Popper 定位，无公开视觉变体。

可访问性

Menubar 复用 Reka UI 的 menubar/menu ARIA、方向键导航、Enter/Space 选择与 Escape 关闭。Trigger 应有 aria-haspopup；Root 应有 aria-label。

API 参考

属性	类型	默认值	说明
`MenubarMenu value`	`string`	`—`	菜单项唯一标识。
`MenubarTrigger as / asChild`	`string \| Component / boolean`	`'button' / false`	触发器的元素组合能力。
`MenubarItem disabled`	`boolean`	`false`	禁用菜单项。
`MenubarCheckboxItem v-model`	`boolean \| 'indeterminate'`	`undefined`	复选框的选中状态。
`MenubarRadioItem value`	`AcceptableValue`	`—`	必填的单选项值。
`MenubarRadioGroup v-model`	`AcceptableValue`	`undefined`	单选组当前值。
`MenubarSeparator class`	`HTMLAttributes["class"]`	`undefined`	合并到分隔线的调用方类。
`MenubarLabel class`	`HTMLAttributes["class"]`	`undefined`	合并到标签的调用方类。
`MenubarSub v-model:open`	`boolean`	`undefined`	子菜单的受控打开状态。
`MenubarShortcut class`	`HTMLAttributes["class"]`	`undefined`	合并到快捷键标签的调用方类。