# Dropdown Menu

Source: https://lumeo.nativ.sh/components/dropdown-menu

# Dropdown Menu

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

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## 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

Preview Code

Default

Open

Preview Code

With Groups

Actions

Preview Code

With Arrow

Actions

Preview Code

Alignment

Start

End

Preview Code

Checkbox Items

View Options

Preview Code

Radio Items

Sort By

**Mobile (rc.49).** Dropdown menu items now have a minimum 44×44 px touch target so they are reliably tappable on phones without precise stylus-level accuracy.

## 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.

Preview Code

Submenus

File

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

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

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

Align

Lumeo.Align

Start

DropdownMenuContent — horizontal alignment relative to the trigger. Values: Start, Center, End.

Side

Lumeo.Side

Bottom

DropdownMenuContent — preferred side for placement. Values: Top, Right, Bottom, Left.

ShowArrow

bool

false

DropdownMenuContent — renders a small arrow pointing at the trigger.

AriaLabel

string?

null

DropdownMenuGroup — accessible name for the group.

Value

string?

null

DropdownMenuRadioGroup — currently selected value. Use with @bind-Value.

ValueChanged

EventCallback<string>

—

DropdownMenuRadioGroup — two-way binding callback.

## Related Components

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