Skip to content
Glint UI

Menubar

A desktop application menu bar presenting a horizontal strip of top-level menus with full keyboard navigation.

Usage

import { Menubar, MenubarMenu } from "@glint/components/menubar.slint";


export component AppWindow inherits Window {
    Menubar {
        menus: [
            {
                label: "File",
                items: [
                    { label: "New File", shortcut: "Ctrl+N" },
                    { label: "Save", shortcut: "Ctrl+S" },
                ]
            },
            {
                label: "Edit",
                items: [
                    { label: "Undo", shortcut: "Ctrl+Z" },
                    { label: "Redo", shortcut: "Ctrl+Y" },
                ]
            }
        ];
        selected(menu, item, child) => {
            // handle selection
        }
    }
}

Menubar renders a top-level application menu bar from an array of MenubarMenu structs. Each menu item contains a label for the top bar and an array of MenuEntry items for the popup menu, powered by MenuPanel and following the grouped rows model.

The keyboard traversal matches desktop standards: Tab enters the menu bar, ←/→ step across top-level triggers (and switch between open menus if one is expanded), ↓ or Enter opens the focused menu, and Escape closes the active menu.

Examples

Nested submenus and positioning

Submenus cascade beside the parent item when children are present. Use submenu-side (PanelSide.right, PanelSide.left) and submenu-align (PanelAlign.start, PanelAlign.center, PanelAlign.end) to position nested panels.

Checkbox and radio options across menus

Menu rows can hold independent checkable toggles or grouped radio options. Changes update the menus property reactively.

Custom menu width floor

Use min-content-width to establish the minimum width for dropdown panels across all top-level menus. Panels automatically grow wider if any row requires more horizontal space.

API Reference

Properties

PropertyTypeDefaultDescription
menusin-out [MenubarMenu]no defaultTop-level menus (File / Edit / View / …), each with its own items. in-out because activating a checkbox or radio row writes its new checked back here.
min-content-widthin length200pxThe floor under every open menu's panel width; a panel grows past it to fit its widest row, icon and shortcut hint included.
submenu-sidein PanelSidePanelSide.rightWhere a row's submenu panel opens: which side of the menu, and how it lines up against the row it hangs off. A submenu opens beside its row, so top and bottom read as right.
submenu-alignin PanelAlignPanelAlign.start
highlighted-indexin-out int0Row highlighted by ↑/↓ inside the currently-open popup.
focused-indexin-out int0Trigger the keyboard stands on; consumers rarely set this.

Callbacks

CallbackDescription
selected(int , int , int)Fired with the menu index, the chosen row's index, and the index of the submenu leaf that was taken or -1 when the row itself was; the popup closes.

Enums

EnumValues
PanelSidetop, right, bottom, left
PanelAlignstart, center, end

Accessibility

  • Top-level menu bar semantics. Each trigger in the horizontal bar is an accessible button announcing the menu label and whether that menu is expanded (accessible-expanded).
  • Menu item semantics. Open menus render as accessible list structures where items carry their index, name, checkable state, and shortcut descriptions.
  • Keyboard navigation. Tab navigates into the bar. ←/→ move focus between menu triggers, automatically opening adjacent menus if a menu is already open. ↑/↓ navigate within an open menu. Escape closes open submenus and top-level menus.
  • Focus ring. Menu triggers display a standard theme focus ring when navigated via keyboard.