Fab & FabMenu

A Material Design-inspired floating action button (Fab) and a multi-action menu (FabMenu) that animates up from a main FAB with a staggered reveal. Each action supports Icon, Text, and Command, plus full color and border customization.

• 
• 

Frameworks

.NET MAUI

Blazor

Closed	Menu Open

Placement

Place Fab / FabMenu inside a Grid that fills the page — the same pattern used by SheetView / ImageViewer — so the FabMenu’s backdrop can cover the main content.

<ContentPage>
    <Grid>
        <!-- Main page content -->
        <ScrollView>
            <!-- ... -->
        </ScrollView>

        <!-- Fab/FabMenu overlay on top -->
        <shiny:FabMenu IsOpen="{Binding IsMenuOpen}"
                       Icon="plus.png"
                       HorizontalOptions="End"
                       VerticalOptions="End"
                       Margin="24">
            <!-- items -->
        </shiny:FabMenu>
    </Grid>
</ContentPage>

AI Skill

Claude Code GitHub Copilot

Step 1 — Add the marketplace:

claude plugin marketplace add shinyorg/skills

Step 2 — Install the plugin:

claude plugin install shiny-controls@shiny

Step 1 — Add the marketplace:

copilot plugin marketplace add https://github.com/shinyorg/skills

Step 2 — Install the plugin:

copilot plugin install shiny-controls@shiny

View shiny-controls Plugin