Lumeo
Package LumeoA11yfocus-managedkeyboardgroupmenuTested Tier 4 · 51 testsView source ↗

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 />
Tested Tier 4 · E2E + a11y
all components →
Render Behavior A11y Keyboard Scale E2E

51 tests across 10 files. Auto-generated from the test suite.

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.

Toggle items stay open on click so several can be flipped in one pass; radio items are single-select.

Variant=Destructive paints the item (and its icon) in the destructive color; Inset aligns label-only items under items that have a leading icon or checkmark.

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
ChildContent RenderFragment? — One or more MenubarMenu elements, rendered inside the role="menubar" bar.
Class string? — Additional CSS classes merged onto the menubar's root <div>.
AdditionalAttributes Dictionary<string, object>? — Captures any unmatched attributes and applies them to the menubar's root <div>.

MenubarMenu

Prop Type Default Description
ChildContent RenderFragment? — The menu's trigger and content, typically a MenubarTrigger and MenubarContent.
Class string? — Additional CSS classes merged onto the menu's wrapper <div>.
AdditionalAttributes Dictionary<string, object>? — Captures any unmatched attributes and applies them to the menu's wrapper <div>.

MenubarTrigger

Prop Type Default Description
ChildContent RenderFragment? — The trigger's label content (e.g. "File", "Edit").
Class string? — Additional CSS classes merged onto the trigger's <button>.
AdditionalAttributes Dictionary<string, object>? — Captures any unmatched attributes and applies them to the trigger's <button>.

MenubarContent

Prop Type Default Description
ChildContent RenderFragment? — The menu's items, rendered inside the role="menu" popup.
Class string? — Additional CSS classes merged onto the menu popup.
AdditionalAttributes Dictionary<string, object>? — Captures any unmatched attributes and applies them to the menu popup.

MenubarItem

Prop Type Default Description
ChildContent RenderFragment? — The item's label content.
Disabled bool false Disables the item, preventing clicks and dimming its appearance.
Inset bool false Indents the item by a label's width so it lines up with checkbox/radio items (shadcn inset). Adds ps-8 and emits data-inset.
Variant MenuItemVariant MenuItemVariant.Default Visual variant. Destructive renders the item in the destructive color and emits data-variant="destructive".
Class string? — Additional CSS classes merged onto the item's <button>.
AdditionalAttributes Dictionary<string, object>? — Captures any unmatched attributes and applies them to the item's <button>.

Events

OnClick EventCallback Raised when the item is clicked. The menu closes immediately afterward.

MenubarCheckboxItem

Prop Type Default Description
ChildContent RenderFragment? — The item's label content, rendered after the check indicator.
Checked bool false Whether the checkbox item is checked. Two-way bindable via CheckedChanged; toggling does not close the menu, so multiple items can be flipped in one open.
Disabled bool false Disables the item, preventing clicks from toggling it.
Class string? — Additional CSS classes merged onto the item's <button>.
AdditionalAttributes Dictionary<string, object>? — Captures any unmatched attributes and applies them to the item's <button>.

Events

CheckedChanged EventCallback<bool> Raised when the item is clicked and its checked state toggles.

MenubarRadioGroup / MenubarRadioItem

Prop Type Default Description
ChildContent RenderFragment? — The group's MenubarRadioItem options.
Value string? — The currently selected item's Value. Two-way bindable via ValueChanged; selecting an item does not close the menu.
AdditionalAttributes Dictionary<string, object>? — Captures any unmatched attributes and applies them to the group's role="group" <div>.

Events

ValueChanged EventCallback<string> Raised when a different MenubarRadioItem is selected.
Prop Type Default Description
ChildContent RenderFragment? — The option's label content.
Value* string "" This option's value, compared against the ambient Value to decide whether it's selected and passed to ValueChanged on selection. Required.
Disabled bool false Disables the option, preventing clicks from selecting it.
Class string? — Additional CSS classes merged onto the option's <button>.
AdditionalAttributes Dictionary<string, object>? — Captures any unmatched attributes and applies them to the option's <button>.

MenubarGroup

Prop Type Default Description
ChildContent RenderFragment? — The grouped MenubarItem (or similar) elements.
AriaLabel string? — Accessible name for the group's role="group" element, announced by assistive technology. Pair with a visible MenubarLabel when a titled section is desired.
Class string? — Additional CSS classes merged onto the group <div>.
AdditionalAttributes Dictionary<string, object>? — Captures any unmatched attributes and applies them to the group <div>.

MenubarSeparator

Prop Type Default Description
Class string? — Additional CSS classes merged onto the divider <div>.
AdditionalAttributes Dictionary<string, object>? — Captures any unmatched attributes and applies them to the divider <div>.

MenubarLabel

Prop Type Default Description
ChildContent RenderFragment? — The label's text content.
Inset bool false Indents the label to align with inset items (shadcn inset).
Class string? — Additional CSS classes merged onto the label <div>.
AdditionalAttributes Dictionary<string, object>? — Captures any unmatched attributes and applies them to the label <div>.

MenubarShortcut

Prop Type Default Description
ChildContent RenderFragment? — The shortcut text (e.g. "⌘K"), right-aligned within its parent item.
Class string? — Additional CSS classes merged onto the <span> element.
AdditionalAttributes Dictionary<string, object>? — Captures any unmatched attributes and applies them to the <span> element.

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

Cookies & consent

We use a minimal set of cookies to run the site and optionally measure anonymous usage to improve it. You choose what's on.Read the privacy policy.