Menubar

Navigation

Desktop application-style menu bar (File / Edit / View…).

Props

Prop	Type	Default	Description
`menus`	`DsMenubarMenu[]`	`[]`	List of menus { label, items[] }. Each item: { label, shortcut?, disabled?, separator?, action? }.

Examples

App menubar

vue

<DsMenubar
  :menus="[
    {
      label: 'File',
      items: [
        { label: 'New', shortcut: '⌘N', action: () => {} },
        { label: 'Open…', shortcut: '⌘O', action: () => {} },
        { separator: true },
        { label: 'Save', shortcut: '⌘S', action: () => {} },
        { label: 'Export', action: () => {} },
      ],
    },
    {
      label: 'Edit',
      items: [
        { label: 'Undo', shortcut: '⌘Z', action: () => {} },
        { label: 'Redo', shortcut: '⌘⇧Z', action: () => {} },
        { separator: true },
        { label: 'Cut', shortcut: '⌘X', action: () => {} },
        { label: 'Copy', shortcut: '⌘C', action: () => {} },
        { label: 'Paste', shortcut: '⌘V', action: () => {} },
      ],
    },
    {
      label: 'View',
      items: [
        { label: 'Zoom In', shortcut: '⌘+', action: () => {} },
        { label: 'Zoom Out', shortcut: '⌘-', action: () => {} },
        { separator: true },
        { label: 'Full Screen', shortcut: '⌘⌃F', action: () => {} },
      ],
    },
  ]"
/>

Skeleton

Use DsMenubarSkeleton as a loading placeholder while content is being fetched.

Default

vue

<DsMenubarSkeleton />

Accessibility

Escape closes the open menu.
Click outside closes the menu.
Keyboard shortcuts are displayed to the right of each item.

Dropdown

NavigationMenu