Skip to content
Document DB v12 - Improved Interceptors with Soft Delete Integration, AI protections, & Admin UI with Aspire Integration!How!?

Fab & FabMenu | FabMenu

A main Fab plus one or more FabMenuItem children that animate up (staggered) when the menu opens. IsOpen is two-way bindable.

<shiny:FabMenu IsOpen="{Binding IsMenuOpen}"
Icon="plus.png"
FabBackgroundColor="#2196F3"
HorizontalOptions="End"
VerticalOptions="End"
Margin="24">
<shiny:FabMenuItem Icon="share.png"
Text="Share"
FabBackgroundColor="#4CAF50"
Command="{Binding ShareCommand}" />
<shiny:FabMenuItem Icon="edit.png"
Text="Edit"
FabBackgroundColor="#FF9800"
Command="{Binding EditCommand}" />
<shiny:FabMenuItem Icon="delete.png"
Text="Delete"
FabBackgroundColor="#F44336"
Command="{Binding DeleteCommand}" />
</shiny:FabMenu>

Tapping the main Fab toggles IsOpen. Tapping a FabMenuItem executes its Command, raises ItemTapped, and (by default) closes the menu.

In addition to all main-Fab pass-throughs (Icon, Text, FabBackgroundColor, BorderColor, BorderThickness, TextColor):

Property Type Default Description
IsOpen bool false Two-way bindable; opens/closes with animation
Items IList<FabMenuItem> empty Content property — place items directly inside <shiny:FabMenu>
FabSize double 56 Main FAB button size (diameter)
HasShadow bool true Drop shadow on the main FAB
MenuAlignment LayoutOptions End Horizontal alignment of the menu stack (Start for left-aligned, End for right-aligned)
HasBackdrop bool true Show dim backdrop behind the menu
BackdropColor Color Black Backdrop color
BackdropOpacity double 0.4 Backdrop peak opacity
CloseOnBackdropTap bool true Close when backdrop tapped
CloseOnItemTap bool true Close after item tap
AnimationDuration uint 200 Duration (ms) of open/close animation
UseFeedback bool true Haptic click when menu is toggled

Events: ItemTapped(FabMenuItem). Methods: Open(), Close(), Toggle().

An action inside the menu — icon button plus side label.

Property Type Default Description
Icon ImageSource? null Icon rendered inside the circular button
Text string? null Side label
Command ICommand? null Invoked on tap
CommandParameter object? null Parameter forwarded to the Command
FabBackgroundColor Color #2196F3 Icon button fill
BorderColor Color? null Icon button outline
BorderThickness double 0 Icon button outline thickness
TextColor Color Black Side-label text color
LabelBackgroundColor Color White Side-label fill color
FontSize double 13 Side-label font size
Size double 44 Icon button diameter
IconSize double 20 Icon image size
UseFeedback bool true Haptic click on tap

Events: Clicked.