Fab & FabMenu | FabMenu

FabMenu

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

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, so the whole row is a single tap target rather than a detached label chip plus a circle. Every chip is inset so its centre lands on the main FAB’s vertical axis, which is what makes the items read as one column. An item with no Text collapses to a plain circle of Size.

<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.

FabMenu Properties

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
IconRotation	double	45	Degrees the main FAB rotates while open — the classic “+” → “×”. 0 disables it, and it is skipped when the main FAB has Text, since a rotated word reads as broken
UseFeedback	bool	true	Haptic click when menu is toggled

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

FabMenuItem

An action inside the menu — one pill holding the label and a tinted icon chip.

FabMenuItem Properties

Property	Type	Default	Description
Icon	ImageSource?	null	Icon rendered in the circular chip
Text	string?	null	Label inside the pill; when null the item collapses to a plain circle
Command	ICommand?	null	Invoked on tap
CommandParameter	object?	null	Parameter forwarded to the Command
FabBackgroundColor	Color	theme Primary	Icon chip fill — and the whole pill’s fill when the item has no Text
BorderColor	Color?	theme OutlineVariant	Pill outline stroke
BorderThickness	double	1	Pill outline thickness (0 for a borderless pill)
TextColor	Color	theme OnSurface	Label text color
LabelBackgroundColor	Color	theme SurfaceContainerHigh	Pill body fill behind the label
FontSize	double	13	Label font size
FontAttributes	FontAttributes	None	Label font attributes
Size	double	44	Pill height (diameter when the item has no Text)
IconSize	double	20	Icon image size
HasShadow	bool	true	Drop shadow on the pill
UseFeedback	bool	true	Haptic click on tap

Leave the colours alone and the pill picks up the theme; set only FabBackgroundColor per item to tint its chip. Keep every item’s Size the same so the pills read as one column.

Events: Clicked.