Preview Updated 2026-05-10

MenuBar

Top app menu bar (File / Edit / View style); supports shortcuts, separators, and danger items.

Basic usage

Click a menu to open / toggle; hover lets you switch quickly between top-level menus; clicking outside or selecting an item closes the menu.

背景

src/App.vue

<script setup lang="ts">
import { CfMenuBar } from '@chufix-design/vue';
const menus = [
  {
    id: 'file', label: 'File',
    items: [
      { id: 'new', label: '新建', shortcut: '⌘N' },
      { id: 'open', label: '打开…', shortcut: '⌘O' },
      { separator: true },
      { id: 'save', label: '保存', shortcut: '⌘S' },
      { id: 'saveas', label: '另存为…', shortcut: '⌘⇧S' },
    ],
  },
  {
    id: 'edit', label: 'Edit',
    items: [
      { id: 'undo', label: '撤销', shortcut: '⌘Z' },
      { id: 'redo', label: '重做', shortcut: '⌘⇧Z' },
      { separator: true },
      { id: 'cut', label: '剪切', shortcut: '⌘X' },
      { id: 'copy', label: '复制', shortcut: '⌘C' },
      { id: 'paste', label: '粘贴', shortcut: '⌘V' },
    ],
  },
  {
    id: 'view', label: 'View',
    items: [
      { id: 'sidebar', label: '切换侧边栏', shortcut: '⌘B' },
      { id: 'palette', label: '命令面板…', shortcut: '⌘K' },
    ],
  },
];
</script>
<template>
  <div style="border: 1px solid var(--line-1); border-radius: var(--r-6); overflow: visible;">
    <CfMenuBar :menus="menus" @select="(menuId, itemId) => alert(`${menuId} → ${itemId}`)" />
  </div>
</template>

<script setup>
import { CfMenuBar } from '@chufix-design/vue';
const menus = [
  {
    id: 'file', label: 'File',
    items: [
      { id: 'new', label: '新建', shortcut: '⌘N' },
      { id: 'open', label: '打开…', shortcut: '⌘O' },
      { separator: true },
      { id: 'save', label: '保存', shortcut: '⌘S' },
      { id: 'saveas', label: '另存为…', shortcut: '⌘⇧S' },
    ],
  },
  {
    id: 'edit', label: 'Edit',
    items: [
      { id: 'undo', label: '撤销', shortcut: '⌘Z' },
      { id: 'redo', label: '重做', shortcut: '⌘⇧Z' },
      { separator: true },
      { id: 'cut', label: '剪切', shortcut: '⌘X' },
      { id: 'copy', label: '复制', shortcut: '⌘C' },
      { id: 'paste', label: '粘贴', shortcut: '⌘V' },
    ],
  },
  {
    id: 'view', label: 'View',
    items: [
      { id: 'sidebar', label: '切换侧边栏', shortcut: '⌘B' },
      { id: 'palette', label: '命令面板…', shortcut: '⌘K' },
    ],
  },
];
</script>
<template>
  <div style="border: 1px solid var(--line-1); border-radius: var(--r-6); overflow: visible;">
    <CfMenuBar :menus="menus" @select="(menuId, itemId) => alert(`${menuId} → ${itemId}`)" />
  </div>
</template>

import { CfMenuBar } from '@chufix-design/react';

export default function Demo() {
  const menus = [
    {
      id: 'file', label: 'File',
      items: [
        { id: 'new', label: '新建', shortcut: '⌘N' },
        { id: 'open', label: '打开…', shortcut: '⌘O' },
        { separator: true },
        { id: 'save', label: '保存', shortcut: '⌘S' },
        { id: 'saveas', label: '另存为…', shortcut: '⌘⇧S' },
      ],
    },
    {
      id: 'edit', label: 'Edit',
      items: [
        { id: 'undo', label: '撤销', shortcut: '⌘Z' },
        { id: 'redo', label: '重做', shortcut: '⌘⇧Z' },
        { separator: true },
        { id: 'cut', label: '剪切', shortcut: '⌘X' },
        { id: 'copy', label: '复制', shortcut: '⌘C' },
        { id: 'paste', label: '粘贴', shortcut: '⌘V' },
      ],
    },
    {
      id: 'view', label: 'View',
      items: [
        { id: 'sidebar', label: '切换侧边栏', shortcut: '⌘B' },
        { id: 'palette', label: '命令面板…', shortcut: '⌘K' },
      ],
    },
  ];
  return (
    <>
      <CfMenuBar menus={menus} onSelect={(menuId, itemId) => onPick(menuId, itemId)} />
    </>
  );
}

import { CfMenuBar } from '@chufix-design/react';

export default function Demo() {
  const menus = [
    {
      id: 'file', label: 'File',
      items: [
        { id: 'new', label: '新建', shortcut: '⌘N' },
        { id: 'open', label: '打开…', shortcut: '⌘O' },
        { separator: true },
        { id: 'save', label: '保存', shortcut: '⌘S' },
        { id: 'saveas', label: '另存为…', shortcut: '⌘⇧S' },
      ],
    },
    {
      id: 'edit', label: 'Edit',
      items: [
        { id: 'undo', label: '撤销', shortcut: '⌘Z' },
        { id: 'redo', label: '重做', shortcut: '⌘⇧Z' },
        { separator: true },
        { id: 'cut', label: '剪切', shortcut: '⌘X' },
        { id: 'copy', label: '复制', shortcut: '⌘C' },
        { id: 'paste', label: '粘贴', shortcut: '⌘V' },
      ],
    },
    {
      id: 'view', label: 'View',
      items: [
        { id: 'sidebar', label: '切换侧边栏', shortcut: '⌘B' },
        { id: 'palette', label: '命令面板…', shortcut: '⌘K' },
      ],
    },
  ];
  return (
    <>
      <CfMenuBar menus={menus} onSelect={(menuId, itemId) => onPick(menuId, itemId)} />
    </>
  );
}

API

menus: MenuBarMenu[] — { id, label, items: MenuBarItem[] }

MenuBarItem: { id, label, shortcut?, disabled?, danger?, separator? }

Events: select(menuId, itemId, item).