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
DropdownMenuShortcut right-aligns a keyboard hint; Variant=Destructive tints a dangerous action; Inset aligns label-only items beside icon items.
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
SubTriggeropens 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 |
|---|---|
| Enter | Open the menu when the trigger is focused, or activate the highlighted item |
| Space | Open the menu or toggle a checkbox/radio item |
| ArrowDown | Move highlight to the next menu item |
| ArrowUp | Move highlight to the previous menu item |
| Escape | Close the menu and return focus to the trigger |
| Home | Move highlight to the first menu item |
| End | Move highlight to the last menu item |
API Reference
DropdownMenu
DropdownMenuItem
DropdownMenuShortcut
DropdownMenuCheckboxItem
DropdownMenuRadioGroup / DropdownMenuRadioItem
DropdownMenuRadioGroup
DropdownMenuRadioItem
DropdownMenuTrigger / DropdownMenuContent / DropdownMenuLabel / DropdownMenuGroup / DropdownMenuSeparator
DropdownMenuTrigger
DropdownMenuContent
DropdownMenuLabel
DropdownMenuGroup
DropdownMenuSeparator
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