Floating Menu Component

Go back

Bottom End — Account Menu

Bottom Start — Actions Menu

Right Start — Context Menu

Top End — Upward Opening

Persistent — No Auto-Close on Item Click

Usage examples

Copy-paste-ready snippets for common FloatingMenu patterns.

Basic menu with trigger

<FloatingMenu @bind-IsOpen="showMenu" Position="bottom-end">
    <Trigger>
        <Button Variant="secondary" Text="Options" />
    </Trigger>
    <ChildContent>
        <div class="floating-menu-group">
            <button class="floating-menu-item">Edit</button>
            <button class="floating-menu-item">Duplicate</button>
            <button class="floating-menu-item">Delete</button>
        </div>
    </ChildContent>
</FloatingMenu>

@code {
    private bool showMenu;
}

Positioning

@* Position values: "top-start", "top-end",
                          "bottom-start", "bottom-end" (default) *@
<FloatingMenu @bind-IsOpen="open" Position="top-end">
    <Trigger>...</Trigger>
    <ChildContent>...</ChildContent>
</FloatingMenu>

@* CloseOnItemClick="false" keeps the menu open after clicks *@
<FloatingMenu @bind-IsOpen="open" CloseOnItemClick="false">
    ...
</FloatingMenu>