Dropdown Menu Component

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

Basic Dropdown Menu

A simple dropdown menu with items.

With Icons

Add Lucide icons to menu items for better visual hierarchy.

With Labels and Separators

Organize menu items with labels and visual separators.

Grouped Items

Group related menu items together.

With Keyboard Shortcuts

Display keyboard shortcuts alongside menu items (visual only).

Functional Keyboard Shortcuts

Keyboard shortcuts that actually work! Press the shortcut keys anywhere on this page (even when the menu is closed) to trigger the action.

Try these shortcuts (even with the menu closed):

Ctrl+Shift+N New File

Ctrl+O Open

Ctrl+S Save

Ctrl+Shift+S Save As

Usage with KeyboardShortcutService:

@inject IKeyboardShortcutService KeyboardShortcuts
@implements IAsyncDisposable

@code {
    private IDisposable? _shortcutNew;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            _shortcutNew = await KeyboardShortcuts.RegisterAsync(
                "Ctrl+Shift+N", HandleNewFile);
        }
    }

    private Task HandleNewFile()
    {
        // Handle the shortcut action
        return Task.CompletedTask;
    }

    public ValueTask DisposeAsync()
    {
        _shortcutNew?.Dispose();
        return ValueTask.CompletedTask;
    }
}

Alignment Options

Control how the dropdown aligns relative to its trigger (Start, Center, End). Test with small icon buttons to see alignment clearly.

Disabled Items

Menu items can be disabled to prevent interaction.

AsChild Pattern

Use AsChild to compose triggers with your own styled Button components.

Without AsChild

DropdownMenuTrigger renders its own button with inline classes.

With AsChild

Button component receives trigger behavior via TriggerContext.

Code Example:

<DropdownMenu>
    <DropdownMenuTrigger AsChild>
        <Button Variant="ButtonVariant.Outline">
            Actions
            <LucideIcon Name="chevron-down" Size="16" />
        </Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent>
        <DropdownMenuItem>Edit</DropdownMenuItem>
        <DropdownMenuItem>Delete</DropdownMenuItem>
    </DropdownMenuContent>
</DropdownMenu>

Complex Example

Combining all features: labels, separators, groups, shortcuts, and disabled items.

Checkbox Items

Menu items that toggle a boolean state. Useful for preferences and settings.

Status Bar: Visible

Activity Bar: Visible

Panel: Hidden

Radio Items

A group of menu items where only one can be selected at a time.

Selected position: bottom

Submenus

Nested menus for organizing complex options. Hover or use arrow keys to open submenus.