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';
</script>

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
Name Type Default Required Bindable Description
id text
menus readonly MenuBarMenu[] req
label text 'Application menu'
labelledBy text
role unknown req
dir unknown req
onkeydown unknown req