Navigation

MenuBar

Command menubar for application chrome such as File, Edit, and View menus.

import { MenuBar } from '@lostgradient/cinder/menu-bar';
navigationmenuchrome
01

Overview

Command menubar for application chrome such as File, Edit, and View menus.

Usage

svelte 
<script lang="ts">
  import MenuBar from '@lostgradient/cinder/menu-bar';
  import type { MenuBarMenu } from '@lostgradient/cinder/menu-bar';

  const menus: MenuBarMenu[] = [
    {
      id: 'file',
      label: 'File',
      accessKey: 'f',
      items: [
        { id: 'new-file', label: 'New File', shortcut: 'Ctrl+N' },
        { id: 'open', label: 'Open...', shortcut: 'Ctrl+O' },
        {
          type: 'submenu',
          id: 'open-recent',
          label: 'Open Recent',
          items: [
            { id: 'design-system', label: 'Design system audit' },
            { id: 'component-roadmap', label: 'Component roadmap' },
            { type: 'separator', id: 'recent-separator' },
            { id: 'clear-recent', label: 'Clear Recent', disabled: true },
          ],
        },
        { type: 'separator', id: 'file-separator' },
        { id: 'delete-workspace', label: 'Delete Workspace', variant: 'danger' },
      ],
    },
    {
      id: 'edit',
      label: 'Edit',
      accessKey: 'e',
      items: [
        { id: 'undo', label: 'Undo', shortcut: 'Ctrl+Z' },
        { id: 'redo', label: 'Redo', shortcut: 'Shift+Ctrl+Z', disabled: true },
        { type: 'separator', id: 'edit-separator' },
        { id: 'find', label: 'Find in Project', shortcut: 'Ctrl+F' },
      ],
    },
    {
      id: 'view',
      label: 'View',
      accessKey: 'v',
      items: [
        { id: 'toggle-sidebar', label: 'Toggle Sidebar', shortcut: 'Ctrl+B' },
        { id: 'command-palette', label: 'Command Palette', shortcut: 'Ctrl+K' },
      ],
    },
  ];
</script>

<MenuBar {menus} label="Workspace menu" />

Guidance

Use When

  • Building a desktop-style command menubar with dropdown command groups.
  • Exposing top-level application menus that need arrow-key traversal and optional submenus.

Avoid When

  • Linking between routes or sections — use navigation-bar or side-navigation instead.
  • Showing one standalone trigger with a menu — use dropdown, dropdown-menu, and dropdown-item directly.
Live preview
02

When to use

Use when
  • Building a desktop-style command menubar with dropdown command groups.
  • Exposing top-level application menus that need arrow-key traversal and optional submenus.
Avoid when
  • Linking between routes or sections — use navigation-bar or side-navigation instead.
  • Showing one standalone trigger with a menu — use dropdown, dropdown-menu, and dropdown-item directly.
03

Examples

File, Edit, and View

A desktop-style application menubar with shortcuts, a disabled row, and an Open Recent submenu.

04

Props

Props for menu-bar
NameTypeDefaultDescription
id text
menus required MenuBarMenu[]
label text 'Application menu'
ariaLabelledby text
dir 'ltr''rtl''auto'undefinednull
onkeydown KeyboardEventHandler<T>undefinednull