FloatingActionButtonMenu

FAB menus open from a floating action button to show a small set of related actions. This component uses the native popover API and implements the M3 Expressive one-size menu with primary, secondary, and tertiary color sets.

Anatomy

Highlight

Element	Part	Selector
<div>	root	[data-scope="floating-action-button-menu"][data-part="root"] left_clickLMBCopy
<button>	trigger	[data-scope="floating-action-button-menu"][data-part="trigger"] left_clickLMBCopy
<Icon>	trigger-icon	[data-scope="floating-action-button-menu"][data-part="trigger-icon"] left_clickLMBCopy
<Icon>	close-icon	[data-scope="floating-action-button-menu"][data-part="close-icon"] left_clickLMBCopy
<div>	popover	[data-scope="floating-action-button-menu"][data-part="popover"] left_clickLMBCopy
<div>	surface	[data-scope="floating-action-button-menu"][data-part="surface"] left_clickLMBCopy
<div>	items	[data-scope="floating-action-button-menu"][data-part="items"] left_clickLMBCopy
<component>	item	[data-scope="floating-action-button-menu"][data-part="item"] left_clickLMBCopy
<span>	item-iconconditional	[data-scope="floating-action-button-menu"][data-part="item-icon"] left_clickLMBCopy
<span>	item-label	[data-scope="floating-action-button-menu"][data-part="item-label"] left_clickLMBCopy

Props

Name	Description	Default	Control
colorOptional	The color set of the FAB menu. primarysecondarytertiary	"primary"	checkprimarysecondarytertiary
sizeOptional	Size of the closed trigger FAB. The expanded menu always uses one item size. largemediumregular	"regular"	largemediumcheckregular
alignmentOptional	Horizontal alignment of menu items relative to the trigger FAB. startend	"end"	startcheckend
iconOptional	Name of the icon shown on the closed trigger FAB. string | undefined	"add"
closeIconOptional	Name of the icon shown on the close FAB. string | undefined	"close"
ariaLabelOptional	Accessible label for the trigger FAB. string | undefined	"Toggle menu"
disabledOptional	Whether the trigger FAB is disabled. boolean | undefined	false
openOptional	- boolean | undefined	false

Events2

Name	Type	Description
update:open	[value: boolean]	-
select	[event: MouseEvent, itemElement: HTMLElement]	-

Slots1

Name	Parameters	Description
default	-	Menu items, usually FloatingActionButtonMenuItem components.

Styling39

Preview

Token	Description
--md-fab-menu-trigger-container-colorColor Fallbackvar(--md-sys-color-primary-container)	Controls trigger FAB container color.
--md-fab-menu-trigger-icon-colorColor Fallbackvar(--md-sys-color-on-primary-container)	Controls trigger FAB icon color.
--md-fab-menu-trigger-state-layer-colorColor Fallbackvar(--md-sys-color-on-primary-container)	Controls trigger FAB state layer color.
--md-fab-menu-close-button-container-colorColor Fallbackvar(--md-sys-color-primary)	Controls close button container color.
--md-fab-menu-close-button-icon-colorColor Fallbackvar(--md-sys-color-on-primary)	Controls close button icon color.
--md-fab-menu-close-button-state-layer-colorColor Fallbackvar(--md-sys-color-on-primary)	Controls close button state layer color.
--md-fab-menu-item-container-colorColor Fallbackvar(--md-sys-color-primary-container)	Controls menu item container color.
--md-fab-menu-item-label-text-colorColor Fallbackvar(--md-sys-color-on-primary-container)	Controls menu item label text color.
--md-fab-menu-item-icon-colorColor Fallbackvar(--md-sys-color-on-primary-container)	Controls menu item icon color.
--md-fab-menu-item-state-layer-colorColor Fallbackvar(--md-sys-color-on-primary-container)	Controls menu item state layer color.
--md-fab-menu-trigger-container-elevationElevation Fallbackvar(--md-sys-elevation-level3)	Controls trigger FAB container elevation.
--md-fab-menu-close-button-container-elevationElevation Fallbackvar(--md-sys-elevation-level3)	Controls close button container elevation.
--md-fab-menu-close-button-hovered-container-elevationElevation Fallbackvar(--md-sys-elevation-level4)	Controls hovered close button container elevation.
--md-fab-menu-close-button-focused-container-elevationElevation Fallbackvar(--md-sys-elevation-level3)	Controls focused close button container elevation.
--md-fab-menu-close-button-pressed-container-elevationElevation Fallbackvar(--md-sys-elevation-level3)	Controls pressed close button container elevation.
--md-fab-menu-item-container-elevationElevation Fallbackvar(--md-sys-elevation-level0)	Controls menu item container elevation.
--md-fab-menu-item-hovered-container-elevationElevation Fallbackvar(--md-sys-elevation-level4)	Controls hovered menu item container elevation.
--md-fab-menu-item-focused-container-elevationElevation Fallbackvar(--md-sys-elevation-level3)	Controls focused menu item container elevation.
--md-fab-menu-item-pressed-container-elevationElevation Fallbackvar(--md-sys-elevation-level3)	Controls pressed menu item container elevation.
--md-fab-menu-trigger-container-heightSize Fallback56px, 80px, or 96px depending on size	Controls trigger FAB container height.
--md-fab-menu-trigger-container-widthSize Fallback56px, 80px, or 96px depending on size	Controls trigger FAB container width.
--md-fab-menu-trigger-container-shapeShape Fallbackvar(--md-shape-fab-regular), var(--md-shape-fab-medium), or var(--md-shape-fab-large) depending on size	Controls trigger FAB container shape.
--md-fab-menu-trigger-icon-sizeSize Fallback24px, 28px, or 36px depending on size	Controls trigger FAB icon size.
--md-fab-menu-close-button-container-heightSize Fallback56px	Controls close button container height.
--md-fab-menu-close-button-container-widthSize Fallback56px	Controls close button container width.
--md-fab-menu-close-button-container-shapeShape Fallbackvar(--md-shape-action)	Controls close button container shape.
--md-fab-menu-close-button-icon-sizeSize Fallback20px	Controls close button icon size.
--md-fab-menu-close-button-between-spaceSpacing Fallback8px	Controls space between menu items and close button.
--md-fab-menu-item-container-heightSize Fallback56px	Controls menu item container height.
--md-fab-menu-item-container-shapeShape Fallbackvar(--md-shape-action)	Controls menu item container shape.
--md-fab-menu-item-icon-sizeSize Fallback24px	Controls menu item icon size.
--md-fab-menu-item-leading-spaceSpacing Fallback24px	Controls menu item leading space.
--md-fab-menu-item-icon-label-spaceSpacing Fallback8px	Controls space between menu item icon and label.
--md-fab-menu-item-trailing-spaceSpacing Fallback24px	Controls menu item trailing space.
--md-fab-menu-item-between-spaceSpacing Fallback4px	Controls vertical space between menu items.
--md-fab-menu-container-padding-inlineSpacing Fallback16px	Controls inline padding around the popover surface.
--md-fab-menu-focus-indicator-colorFocus Fallbackvar(--md-sys-color-primary)	Controls focus indicator color.
--md-fab-menu-focus-indicator-thicknessFocus Fallbackvar(--md-sys-state-focus-indicator-thickness)	Controls focus indicator thickness.
--md-fab-menu-focus-indicator-outline-offsetFocus Fallbackvar(--md-sys-state-focus-indicator-outer-offset)	Controls focus indicator outline offset.

Examples

Default

Colors

Sizes

Alignment And Links

replyReplyforwardForward

Controlled