Fab & FabMenu | Blazor Usage

The Blazor <Fab> and <FabMenu> components mirror the MAUI controls — same look, same behavior. Two differences are worth knowing up front: Icon is a string (an inline emoji, raw SVG markup, or an image URL) rather than an ImageSource, and FabMenu takes a List<FabMenuItem> of plain data objects rather than child components.

Setup

@using Shiny.Blazor.Controls

Fab

<div style="position: relative; height: 100vh;">
    <!-- Page content -->

    <!-- Icon-only Fab -->
    <Fab Icon="+"
         FabBackgroundColor="#E91E63"
         Clicked="OnAdd" />

    <!-- Extended Fab with text -->
    <Fab Icon="📄"
         Text="Add Item"
         FabBackgroundColor="#4CAF50"
         TextColor="white"
         Clicked="OnAdd" />
</div>

@code {
    void OnAdd(MouseEventArgs e)
    {
        // Handle tap
    }
}

Fab Parameters

Parameter	Type	Default	Description
Icon	string?	null	Emoji, inline SVG, or image URL
Text	string?	null	Optional label; with no label the Fab is a perfect circle
FabBackgroundColor	string	var(--shiny-color-primary, #2196F3)	Fill
TextColor	string	var(--shiny-color-on-primary, #FFFFFF)	Label color
BorderColor / BorderThickness	string? / double	null / 0	Outline
FontSize	double	14	Label font size
Size	double	56	Height (diameter when circular)
IconSize	double	24	Icon size
HasShadow	bool	true	Drop shadow
Disabled	bool	false	Dims the Fab and ignores clicks
Clicked	EventCallback<MouseEventArgs>	—	Tap handler

Anything starting with http or /, or ending in .png / .jpg / .svg / .webp, is rendered as an <img>; anything else is emitted as inline markup, so an emoji or an SVG string both work.

FabMenu

Items are data, not components — build a List<FabMenuItem> and hand it to Items. Each item renders as a pill: the label lives inside one capsule with a tinted circular icon chip on the edge nearest the main FAB, and every chip is inset so its centre lands on the main FAB’s vertical axis. An item with no Text collapses to a plain circle of Size.

<div style="position: relative; height: 100vh;">
    <!-- Page content -->

    <FabMenu Items="items"
             @bind-IsOpen="isMenuOpen"
             Icon="+"
             FabBackgroundColor="#7C3AED"
             ItemTapped="OnItemTapped" />
</div>

@code {
    bool isMenuOpen;

    readonly List<FabMenuItem> items = new()
    {
        new FabMenuItem { Text = "New Note",     Icon = "📝", FabBackgroundColor = "#10B981", Tag = "note"  },
        new FabMenuItem { Text = "New Photo",    Icon = "📷", FabBackgroundColor = "#F59E0B", Tag = "photo" },
        new FabMenuItem { Text = "New Reminder", Icon = "⏰", FabBackgroundColor = "#EF4444", Tag = "alarm" },
    };

    void OnItemTapped(FabMenuItem item)
    {
        // item.Tag identifies which action was chosen
    }
}

FabMenu Parameters

Parameter	Type	Default	Description
Items	List<FabMenuItem>?	null	The menu actions
IsOpen / IsOpenChanged	bool	false	Two-way bindable open state (@bind-IsOpen)
Icon / Text	string?	null	Main FAB icon / label
FabBackgroundColor	string	var(--shiny-color-primary, #2196F3)	Main FAB fill
TextColor	string	var(--shiny-color-on-primary, #FFFFFF)	Main FAB label color
BorderColor / BorderThickness	string? / double	null / 0	Main FAB outline
FabSize	double	56	Main FAB size
HasShadow	bool	true	Drop shadow on the main FAB
MenuAlignment	string	"end"	"start" grows the menu from the left and flips the chip to the leading edge
IconRotation	double	45	Degrees the main FAB rotates while open (“+” → “×”). 0 disables it; skipped when Text is set
HasBackdrop	bool	true	Dim + 2px-blur backdrop while open
BackdropColor	string	var(--shiny-color-scrim, #000000)	Backdrop color
BackdropOpacity	double	0.4	Backdrop peak opacity
CloseOnBackdropTap	bool	true	Close when the backdrop is clicked
CloseOnItemTap	bool	true	Close after an item is clicked
ItemTapped	EventCallback<FabMenuItem>	—	Fires the tapped item

Methods (via @ref): Open(), Close(), Toggle().

FabMenuItem

A plain class, not a component:

Property	Type	Default	Description
Icon	string?	null	Emoji, inline SVG, or image URL
Text	string?	null	Label inside the pill; when null the item is a plain circle
Tag	object?	null	Your own identifier, read back in ItemTapped
FabBackgroundColor	string	var(--shiny-color-primary, #2196F3)	Icon chip fill — and the pill’s fill when there is no Text
TextColor	string	var(--shiny-color-on-surface, #1F2937)	Label color
LabelBackgroundColor	string	var(--shiny-color-surface-container-high, #FFFFFF)	Pill body fill
BorderColor	string?	null (theme outline-variant)	Pill outline
BorderThickness	double	1	Pill outline thickness (0 for borderless)
Size	double	44	Pill height (diameter when there is no Text)
IconSize	double	20	Icon size
FontSize	double	13	Label font size
HasShadow	bool	true	Drop shadow on the pill

Placement

The host element is display: inline-flex and does not position itself. Wrap it in a position: relative container and place it, or use position: fixed for a page-level FAB:

.my-fab-host { position: relative; height: 100%; }
.my-fab-host ::deep .shiny-fab-menu { position: absolute; right: 24px; bottom: 24px; }

The backdrop is position: fixed; inset: 0, so it covers the viewport regardless of where the host sits.

Note

Colors are CSS strings and default to the theme variables (--shiny-color-primary, --shiny-color-surface-container-high, --shiny-color-on-surface, --shiny-color-outline-variant), so leaving them alone is usually right. All motion honors prefers-reduced-motion.