Menubar 菜单栏

Menubar 菜单栏组件用于创建应用程序顶部的导航菜单，支持多级菜单、快捷键显示和禁用状态等功能，常用于桌面应用程序或复杂网站的导航系统。

基础用法

主题色样式

默认主题

主要主题

尺寸样式

小尺寸

默认尺寸

大尺寸

其他变体样式

圆角样式

阴影样式

大阴影样式

透明背景

紧凑模式

组合样式

<template>
  <div class="menubar-styles-demo">
    <div class="demo-section">
      <h3>主题色样式</h3>
      <div class="demo-row">
        <div class="demo-item">
          <h4>默认主题</h4>
          <Menubar>
            <MenubarMenu>
              <MenubarTrigger>文件</MenubarTrigger>
              <MenubarContent>
                <MenubarItem>新建</MenubarItem>
                <MenubarItem>打开</MenubarItem>
                <MenubarSeparator />
                <MenubarItem>保存</MenubarItem>
                <MenubarItem>另存为...</MenubarItem>
              </MenubarContent>
            </MenubarMenu>
            <MenubarMenu>
              <MenubarTrigger>编辑</MenubarTrigger>
              <MenubarContent>
                <MenubarItem>复制</MenubarItem>
                <MenubarItem>粘贴</MenubarItem>
                <MenubarItem>剪切</MenubarItem>
              </MenubarContent>
            </MenubarMenu>
          </Menubar>
        </div>

        <div class="demo-item">
          <h4>主要主题</h4>
          <Menubar theme="primary">
            <MenubarMenu>
              <MenubarTrigger>文件</MenubarTrigger>
              <MenubarContent>
                <MenubarItem>新建</MenubarItem>
                <MenubarItem>打开</MenubarItem>
                <MenubarSeparator />
                <MenubarItem>保存</MenubarItem>
              </MenubarContent>
            </MenubarMenu>
            <MenubarMenu>
              <MenubarTrigger>编辑</MenubarTrigger>
              <MenubarContent>
                <MenubarItem>复制</MenubarItem>
                <MenubarItem>粘贴</MenubarItem>
              </MenubarContent>
            </MenubarMenu>
          </Menubar>
        </div>
      </div>
    </div>

    <div class="demo-section">
      <h3>尺寸样式</h3>
      <div class="demo-row">
        <div class="demo-item">
          <h4>小尺寸</h4>
          <Menubar size="small">
            <MenubarMenu>
              <MenubarTrigger>文件</MenubarTrigger>
              <MenubarContent>
                <MenubarItem>新建</MenubarItem>
                <MenubarItem>打开</MenubarItem>
              </MenubarContent>
            </MenubarMenu>
            <MenubarMenu>
              <MenubarTrigger>编辑</MenubarTrigger>
              <MenubarContent>
                <MenubarItem>复制</MenubarItem>
                <MenubarItem>粘贴</MenubarItem>
              </MenubarContent>
            </MenubarMenu>
          </Menubar>
        </div>

        <div class="demo-item">
          <h4>默认尺寸</h4>
          <Menubar>
            <MenubarMenu>
              <MenubarTrigger>文件</MenubarTrigger>
              <MenubarContent>
                <MenubarItem>新建</MenubarItem>
                <MenubarItem>打开</MenubarItem>
              </MenubarContent>
            </MenubarMenu>
            <MenubarMenu>
              <MenubarTrigger>编辑</MenubarTrigger>
              <MenubarContent>
                <MenubarItem>复制</MenubarItem>
                <MenubarItem>粘贴</MenubarItem>
              </MenubarContent>
            </MenubarMenu>
          </Menubar>
        </div>

        <div class="demo-item">
          <h4>大尺寸</h4>
          <Menubar size="large">
            <MenubarMenu>
              <MenubarTrigger>文件</MenubarTrigger>
              <MenubarContent>
                <MenubarItem>新建</MenubarItem>
                <MenubarItem>打开</MenubarItem>
              </MenubarContent>
            </MenubarMenu>
            <MenubarMenu>
              <MenubarTrigger>编辑</MenubarTrigger>
              <MenubarContent>
                <MenubarItem>复制</MenubarItem>
                <MenubarItem>粘贴</MenubarItem>
              </MenubarContent>
            </MenubarMenu>
          </Menubar>
        </div>
      </div>
    </div>

    <div class="demo-section">
      <h3>其他变体样式</h3>
      <div class="demo-row">
        <div class="demo-item">
          <h4>圆角样式</h4>
          <Menubar rounded>
            <MenubarMenu>
              <MenubarTrigger>文件</MenubarTrigger>
              <MenubarContent>
                <MenubarItem>新建</MenubarItem>
                <MenubarItem>打开</MenubarItem>
              </MenubarContent>
            </MenubarMenu>
          </Menubar>
        </div>

        <div class="demo-item">
          <h4>阴影样式</h4>
          <Menubar shadow>
            <MenubarMenu>
              <MenubarTrigger>文件</MenubarTrigger>
              <MenubarContent>
                <MenubarItem>新建</MenubarItem>
                <MenubarItem>打开</MenubarItem>
              </MenubarContent>
            </MenubarMenu>
          </Menubar>
        </div>

        <div class="demo-item">
          <h4>大阴影样式</h4>
          <Menubar shadow="lg">
            <MenubarMenu>
              <MenubarTrigger>文件</MenubarTrigger>
              <MenubarContent>
                <MenubarItem>新建</MenubarItem>
                <MenubarItem>打开</MenubarItem>
              </MenubarContent>
            </MenubarMenu>
          </Menubar>
        </div>
      </div>

      <div class="demo-row">
        <div class="demo-item">
          <h4>透明背景</h4>
          <div class="transparent-bg-container">
            <Menubar transparent>
              <MenubarMenu>
                <MenubarTrigger>文件</MenubarTrigger>
                <MenubarContent>
                  <MenubarItem>新建</MenubarItem>
                  <MenubarItem>打开</MenubarItem>
                </MenubarContent>
              </MenubarMenu>
              <MenubarMenu>
                <MenubarTrigger>编辑</MenubarTrigger>
                <MenubarContent>
                  <MenubarItem>复制</MenubarItem>
                  <MenubarItem>粘贴</MenubarItem>
                </MenubarContent>
              </MenubarMenu>
            </Menubar>
          </div>
        </div>

        <div class="demo-item">
          <h4>紧凑模式</h4>
          <Menubar dense>
            <MenubarMenu>
              <MenubarTrigger>文件</MenubarTrigger>
              <MenubarContent>
                <MenubarItem>新建</MenubarItem>
                <MenubarItem>打开</MenubarItem>
              </MenubarContent>
            </MenubarMenu>
            <MenubarMenu>
              <MenubarTrigger>编辑</MenubarTrigger>
              <MenubarContent>
                <MenubarItem>复制</MenubarItem>
                <MenubarItem>粘贴</MenubarItem>
              </MenubarContent>
            </MenubarMenu>
          </Menubar>
        </div>

        <div class="demo-item">
          <h4>组合样式</h4>
          <Menubar theme="primary" rounded shadow>
            <MenubarMenu>
              <MenubarTrigger>文件</MenubarTrigger>
              <MenubarContent>
                <MenubarItem>新建</MenubarItem>
                <MenubarItem>打开</MenubarItem>
              </MenubarContent>
            </MenubarMenu>
            <MenubarMenu>
              <MenubarTrigger>编辑</MenubarTrigger>
              <MenubarContent>
                <MenubarItem>复制</MenubarItem>
                <MenubarItem>粘贴</MenubarItem>
              </MenubarContent>
            </MenubarMenu>
          </Menubar>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.menubar-styles-demo {
  padding: 1rem;
  max-width: 100%;
}

.demo-section {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}

.demo-section:last-child {
  border-bottom: none;
}

.demo-row {
  /* display: grid;
  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)); */
  /* gap: 1rem; */
  margin-top: 1rem;
}

.demo-item {
  flex: 1 1 300px;
  min-width: 250px;
  margin-bottom: 1rem;
}

.demo-item h4 {
  margin: 0 0 0.5rem 0;
  font-size: var(--font-size-1);
  color: var(--color-text-1);
}

.transparent-bg-container {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 1rem;
  border-radius: var(--border-radius);
}

.dark .transparent-bg-container {
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
}
</style>

<template>
  <Menubar>
    <MenubarMenu>
      <MenubarTrigger>文件</MenubarTrigger>
      <MenubarContent>
        <MenubarItem
          >新建标签页 <MenubarShortcut>⌘T</MenubarShortcut></MenubarItem
        >
        <MenubarItem>新建窗口</MenubarItem>
        <MenubarSeparator />
        <MenubarItem>共享</MenubarItem>
        <MenubarSeparator />
        <MenubarItem>打印</MenubarItem>
      </MenubarContent>
    </MenubarMenu>

    <MenubarMenu>
      <MenubarTrigger>编辑</MenubarTrigger>
      <MenubarContent>
        <MenubarItem>复制 <MenubarShortcut>⌘C</MenubarShortcut></MenubarItem>
        <MenubarItem>粘贴 <MenubarShortcut>⌘V</MenubarShortcut></MenubarItem>
        <MenubarItem>剪切 <MenubarShortcut>⌘X</MenubarShortcut></MenubarItem>
        <MenubarSeparator />
        <MenubarItem>查找 <MenubarShortcut>⌘F</MenubarShortcut></MenubarItem>
      </MenubarContent>
    </MenubarMenu>
  </Menubar>
</template>

禁用状态

通过设置 disabled 属性，可以禁用整个菜单栏或特定的菜单项。

<template>
  <div class="demo-container">
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>正常菜单</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>菜单项1</MenubarItem>
          <MenubarItem>菜单项2</MenubarItem>
        </MenubarContent>
      </MenubarMenu>

      <MenubarMenu>
        <MenubarTrigger disabled>禁用的菜单</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>菜单项1</MenubarItem>
          <MenubarItem>菜单项2</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>

    <div class="spacing"></div>

    <Menubar disabled>
      <MenubarMenu>
        <MenubarTrigger>整个菜单栏被禁用</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>菜单项1</MenubarItem>
          <MenubarItem>菜单项2</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>

    <div class="spacing"></div>

    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>包含禁用项的菜单</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>正常菜单项</MenubarItem>
          <MenubarItem disabled>禁用的菜单项</MenubarItem>
          <MenubarItem>正常菜单项</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  </div>
</template>

<style scoped>
.demo-container {
  display: flex;
  flex-direction: column;
  /* gap: var(--spacing-md); */
}

.spacing {
  height: 20px;
}
</style>

带点击事件的菜单项

通过设置 onClick 属性，可以为菜单项添加点击事件处理函数。

<template>
  <div class="demo-container">
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>操作</MenubarTrigger>
        <MenubarContent>
          <MenubarItem :onClick="handleNewItem">新建项目</MenubarItem>
          <MenubarItem :onClick="handleSave"
            >保存 <MenubarShortcut>⌘S</MenubarShortcut></MenubarItem
          >
          <MenubarSeparator />
          <MenubarItem :onClick="handleDelete">删除</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>

    <div v-if="message" class="message">{{ message }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const message = ref('');

const handleNewItem = () => {
  message.value = '已创建新项目';
  setTimeout(() => {
    message.value = '';
  }, 2000);
};

const handleSave = () => {
  message.value = '文件已保存';
  setTimeout(() => {
    message.value = '';
  }, 2000);
};

const handleDelete = () => {
  message.value = '项目已删除';
  setTimeout(() => {
    message.value = '';
  }, 2000);
};
</script>

<style scoped>
.demo-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.message {
  padding: var(--padding-2);
  background-color: var(--color-background-success);
  color: var(--color-text-success);
  border-radius: var(--border-radius-small);
  text-align: center;
  margin-top: var(--margin-2);
}
</style>

Menubar Props

属性名	类型	默认值	说明
disabled	boolean	false	是否禁用整个菜单栏

MenubarMenu Props

属性名	类型	默认值	说明
id	string	-	菜单项的唯一标识符

MenubarTrigger Props

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

MenubarItem Props

属性名	类型	默认值	说明
disabled	boolean	false	是否禁用菜单项
onClick	function	undefined	菜单项的点击回调函数

插槽

Menubar

• default: 用于放置 MenubarMenu 组件。

MenubarMenu

• default: 用于放置 MenubarTrigger 和 MenubarContent 组件。

MenubarTrigger

• default: 用于设置菜单触发器的文本内容。

MenubarContent

• default: 用于放置 MenubarItem 和 MenubarSeparator 组件。

MenubarItem

• default: 用于设置菜单项的文本内容。
• shortcut: 用于设置快捷键显示，通常与 MenubarShortcut 组件一起使用。

MenubarShortcut

• default: 用于设置快捷键的文本内容。

键盘交互

• Enter/Space: 激活当前选中的菜单项或触发器。
• Escape: 关闭当前打开的菜单。
• Arrow keys: 在打开的菜单中导航菜单项。