Command Menu Component

Click to open

Or press ⌘K / Ctrl+K

<Button Variant="primary" Text="Open Command Menu" OnClick="OpenMenu" />

<CommandMenu @bind-IsOpen="isMenuOpen" Placeholder="Search">
    <Sections>
        <div class="cmd-section">
            <div class="cmd-section-header">Recent</div>
            @foreach (var user in recentUsers)
            {
                <div class="cmd-item" @onclick="() => SelectUser(user.Name)">
                    <img class="cmd-item-avatar" src="@user.Avatar" />
                    <div class="cmd-item-text">
                        <span class="cmd-item-name">@user.Name</span>
                        <span class="cmd-item-meta">@@@user.Handle</span>
                    </div>
                </div>
            }
        </div>
    </Sections>
</CommandMenu>

@code {
    private bool isMenuOpen;
    private void OpenMenu() => isMenuOpen = true;
    private void SelectUser(string name) => isMenuOpen = false;
}

Inline preview (static)

⌘/

Recent

Phoenix Baker @phoenix

Olivia Rhye @olivia

All users

Phoenix Baker @phoenix

Olivia Rhye @olivia

Lana Steiner @lana

Demi Wilkinson @demi

@* Non-modal static preview using the same CSS classes *@
<div style="max-width: 40rem; border-radius: var(--radius-xl);
            box-shadow: var(--shadow-xl); overflow: hidden;">
    <div class="cmd-input">
        <span class="cmd-input-icon"><svg>...search...</svg></span>
        <span style="flex: 1; color: var(--text-placeholder);">Search</span>
    </div>
    <div class="cmd-section">
        <div class="cmd-section-header">Recent</div>
        <div class="cmd-item">...user row...</div>
    </div>
    <div class="cmd-footer">
        <div class="cmd-footer-hints">...nav hints...</div>
    </div>
</div>

⌘/

Recent

Phoenix Baker @phoenix

Olivia Rhye @olivia

All users

Phoenix Baker @phoenix

Olivia Rhye @olivia

Lana Steiner @lana

Demi Wilkinson @demi

Candice Wu @candice

Natali Craig @natali

Drew Cano @drew