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
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
SubTriggeropens 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
MenubarMenu
MenubarTrigger
MenubarContent
MenubarItem
MenubarCheckboxItem
MenubarRadioGroup / MenubarRadioItem
MenubarGroup
MenubarSeparator
MenubarLabel
MenubarShortcut
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