Lumeo

Dropdown Menu

Displays a menu of actions or options triggered by a button.

Installation

dotnet add package Lumeo

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

Usage

@using Lumeo

<DropdownMenu />

When to Use

  • Provide a list of actions behind a trigger button (e.g., "More options" or kebab menu)
  • Group context-specific actions such as edit, delete, duplicate, or share
  • Build settings menus with checkbox or radio items for toggles and selections
  • Organize file or toolbar operations into labeled groups with separators
  • Replace inline buttons when space is limited and actions are secondary

Submenus

Use the DropdownMenuSub / DropdownMenuSubTrigger / DropdownMenuSubContent triplet to nest a menu inside another. Submenus open on hover (with a small intent delay so a fast diagonal cursor doesn't keep closing them), and you can nest them as deep as your UX allows — the components are recursive.

Keyboard:

  • ArrowRight on a SubTrigger opens the submenu and moves focus to its first item.
  • ArrowLeft closes the current submenu and returns focus to the parent trigger.
  • Escape closes the entire menu tree, not just the current level.
  • Up / Down walks items within the active level.

Keyboard Interactions

Key Action
EnterOpen the menu when the trigger is focused, or activate the highlighted item
SpaceOpen the menu or toggle a checkbox/radio item
ArrowDownMove highlight to the next menu item
ArrowUpMove highlight to the previous menu item
EscapeClose the menu and return focus to the trigger
HomeMove highlight to the first menu item
EndMove highlight to the last menu item

API Reference

DropdownMenu

Property Type Default Description
Open bool false Controls whether the menu is open. Use with @bind-Open for two-way binding.
OpenChanged EventCallback<bool> — Callback invoked when the open state changes.
IsOpen bool false Obsolete alias for Open. Use Open instead.
IsOpenChanged EventCallback<bool> — Obsolete alias for OpenChanged. Use OpenChanged instead.

DropdownMenuItem

Property Type Default Description
OnClick EventCallback — Callback invoked when this menu item is clicked. Also automatically closes the menu.
Disabled bool false When true, the menu item is non-interactive and shown with reduced opacity.

DropdownMenuCheckboxItem

Property Type Default Description
Checked bool false Whether the item is checked. Use with @bind-Checked for two-way binding.
CheckedChanged EventCallback<bool> — Callback invoked when the checked state changes.

DropdownMenuRadioGroup / DropdownMenuRadioItem

Property Type Default Description
Value (RadioGroup) string? null The currently selected radio value. Use with @bind-Value.
Value (RadioItem) string "" The value this radio item represents when selected.

DropdownMenuTrigger / DropdownMenuContent / DropdownMenuLabel / DropdownMenuGroup / DropdownMenuSeparator

Property Type Default Description
AlignLumeo.AlignStartDropdownMenuContent — horizontal alignment relative to the trigger. Values: Start, Center, End.
SideLumeo.SideBottomDropdownMenuContent — preferred side for placement. Values: Top, Right, Bottom, Left.
ShowArrowboolfalseDropdownMenuContent — renders a small arrow pointing at the trigger.
AriaLabelstring?nullDropdownMenuGroup — accessible name for the group.
Valuestring?nullDropdownMenuRadioGroup — currently selected value. Use with @bind-Value.
ValueChangedEventCallback<string>—DropdownMenuRadioGroup — two-way binding callback.

Related Components

  • ContextMenu — Use for right-click context menus instead of button-triggered dropdowns
  • Menubar — Use for horizontal menu bars with multiple dropdown sections
  • Select — Use when the user needs to choose a single value from a list for a form field
  • Popover — Use for rich custom content overlays beyond simple menu items