Lumeo

Menubar

A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.

Installation

dotnet add package Lumeo

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

Usage

@using Lumeo

<Menubar />

When to Use

  • Application menu bars mimicking desktop software (File, Edit, View menus)
  • Desktop-style navigation with keyboard shortcut labels
  • Rich dropdown menus with labels, separators, and disabled items

Use arrow keys to navigate between menus, Enter/Space to open, and Escape to close.

Submenus

Inside a MenubarContent you can nest deeper menus with the MenubarSub / MenubarSubTrigger / MenubarSubContent triplet. Submenus open on hover (with intent delay) and nest recursively — useful for the classic File → Open Recent → … desktop pattern.

Keyboard:

  • ArrowRight on a SubTrigger opens the submenu and focuses its first item.
  • ArrowLeft closes the current submenu and returns focus to the parent trigger (it does not jump to a neighbouring top-level menu).
  • Escape closes the entire menubar tree.

API Reference

Menubar

Prop Type Default Description
ChildContentRenderFragment?nullThe content of the menubar (MenubarMenu items).
Classstring?nullAdditional CSS classes.
AdditionalAttributesDictionary<string, object>?nullAdditional HTML attributes to apply to the root element.

MenubarMenu

Prop Type Default Description
ChildContentRenderFragment?nullThe trigger and content for this menu.
Classstring?nullAdditional CSS classes.
AdditionalAttributesDictionary<string, object>?nullAdditional HTML attributes.

MenubarTrigger

Prop Type Default Description
ChildContentRenderFragment?nullThe trigger label content.
Classstring?nullAdditional CSS classes.
AdditionalAttributesDictionary<string, object>?nullAdditional HTML attributes.

MenubarContent

Prop Type Default Description
ChildContentRenderFragment?nullThe dropdown content (menu items, labels, separators).
Classstring?nullAdditional CSS classes.
AdditionalAttributesDictionary<string, object>?nullAdditional HTML attributes.

MenubarItem

Prop Type Default Description
ChildContentRenderFragment?nullThe item content.
OnClickEventCallback-Callback invoked when the menu item is clicked.
DisabledboolfalseDisables the menu item.
Classstring?nullAdditional CSS classes.
AdditionalAttributesDictionary<string, object>?nullAdditional HTML attributes.

MenubarSeparator

Prop Type Default Description
Classstring?nullAdditional CSS classes.
AdditionalAttributesDictionary<string, object>?nullAdditional HTML attributes.

MenubarLabel

Prop Type Default Description
ChildContentRenderFragment?nullThe label text content.
Classstring?nullAdditional CSS classes.
AdditionalAttributesDictionary<string, object>?nullAdditional HTML attributes.

MenubarShortcut

Prop Type Default Description
ChildContentRenderFragment?nullThe keyboard shortcut text.
Classstring?nullAdditional CSS classes.
AdditionalAttributesDictionary<string, object>?nullAdditional HTML attributes.

Related Components

  • DropdownMenu — For a single dropdown menu triggered by a button
  • NavigationMenu — For site-wide navigation with flyout content panels
  • ContextMenu — For right-click triggered menus on specific elements