FAB menu

A floating action button menu opens a short set of related actions from one button. Its three variants set the color family of the actions, and arrow-key navigation comes built in. Press any button below to open its menu.

New message

New call

New meeting

Take a photo

Choose from library

Scan a document

more_vert

Copy link

Compose email

Quick note

Play next

Add to queue

Save to library

New event

New reminder

New timer

Invite by email

Copy invite link

add

Add card

Add column

mic

Record audio

Record video

New folder

Upload file

New document

Add item

Scan barcode

Share list

React

Comment

Book a flight

Reserve a hotel

Rent a car

Log a walk

Log a meal

Book the vet

New sketch

New layer

Import image

Water now

Add a note

Set a reminder

New game

Join a friend

Daily challenge

Write a recipe

Import from a link

Scan a card

Start a run

Log a ride

Log a swim

New task

New list

New project

Reserve a table

Order takeout

New post

New photo

Go live

New contact

New group

Import contacts

Focus for 25 minutes

Break for 5 minutes

Reference docs⁠

Blazor

React

Web

Overview

Examples

API

Styling

Accessibility

Choosing a button⁠

Six components share the button's form. Each suits a different job:

Button: an action with a name, such as Save, Send invitation, or Delete project.
Icon button: an action shown by a relevant icon only, with no label, such as close, share, or more, where space is tight.
Floating action button: the one most important action on a screen, floating above the content.
FAB menu: a floating action button that opens a short set of related actions, such as new message, new call, or new meeting.
Toggle button: a labeled setting that stays on until it is switched off, such as bold or mute.
Toggle icon button: the same two-state setting, shown by an icon only, such as bookmark or favorite.

Two jobs belong elsewhere. Words that take the reader somewhere are a link in the text, and a choice among options is a set of chips, radio buttons, or a select.

Used together⁠

A FAB menu usually opens from a floating action button:

FAB menu: the short set of related actions it opens.
Floating action button: the usual anchor that opens it.

Choosing a variant⁠

Three variants set the color family of the actions:

Primary: a menu that carries the screen's main action, such as compose in a mail app.
Secondary: a menu that shares the screen with primary-colored content, such as adding to a board.
Tertiary: a menu that needs a contrasting accent, such as recording on a media screen.

Built in⁠

Items open in turn and close together, and skip the motion for readers who prefer reduced motion.
variant colors the items only, and every item is filled. The floating action button that opens the menu keeps a variant of its own. size sizes the items.
The arrow keys walk through the items without leaving the menu.
Activating an item fires item-select and closes the menu, unless stay-open-on-action is set.
open-action opens the menu by click, or by hover and focus with a delay in each direction.
Focus moves to the first enabled item on open and returns to the anchor on close.

Hidden content renders when first shown⁠

A FAB menu keeps its action buttons hidden until the menu opens. Each opening starts like the first, with one tab stop and nothing pressed or highlighted, and your buttons are never replaced. Wait for updateComplete and the hidden content has rendered, so your code can reach it at once. See Hidden content renders when first shown.

Using FAB menus well⁠

Open the menu from the screen's one floating action button, at the bottom-end corner.
Offer only actions that start related tasks, such as new message, new call, and new meeting.
Label every action with a short verb phrase that says what happens next.

These rules follow Material 3 Expressive's guidance for FAB menus, on material.io.

Variants⁠

variant sets the color family of the fanned actions: primary, secondary, or tertiary. Omit it and the menu takes the variant from your style configuration, which is primary unless you have changed it.

The Overview's Choosing a variant says when to use each.

Size⁠

size sizes the items, one of five values from extra-small to extra-large. An item with its own size attribute keeps it. The anchor is its own button and takes its own size.

Open action⁠

open-action is click by default. With hover-focus, hovering or focusing the anchor opens the menu after hover-open-delay, and leaving closes it after hover-close-delay. Both delays default to 400 milliseconds.

Staying open⁠

By default the menu closes after an item runs. Set stay-open-on-action to keep it open, so several actions can run in one opening. stay-open-on-outside-click and stay-open-on-focusout keep it open when a click lands outside it or focus leaves it.

Properties⁠

Property	Attribute	Type	Description
`anchor`	`anchor`	`string`	The ID of the element to align to, in the same page or component, in place of the element in the `anchor` slot. It overrides `anchorElement`.
`anchorElement`		`HTMLElement`	The element it aligns to. If `anchor` is set to a non-empty idref string, this resolves to the element with the given id in the same page or component; otherwise to the element assigned to this property, and failing that to its own slotted anchor.Assigning an element is the only way to anchor to one that an id cannot find, such as an element inside another component. Assigning `null` clears such an assignment; it does not clear the slotted anchor.
`externalAnchor`	`external-anchor`	`boolean`default `false`	Set this when the anchor is elsewhere rather than in the `anchor` slot. It then aligns to the element named by `anchor` or assigned to `anchorElement`.
`fixed`	`fixed`	`boolean`default `false`	A FAB menu is always fixed in place and never scrolls with the page, so setting this has no effect.
`hoverCloseDelay`	`hover-close-delay`	`number`default `400`	The delay between the pointer leaving it and it closing, in milliseconds. It applies when `open-action` is `hover-focus`. See Open action.
`hoverOpenDelay`	`hover-open-delay`	`number`default `400`	The delay between the pointer entering the anchor and it opening, in milliseconds. It applies when `open-action` is `hover-focus`. See Open action.
`open`	`open`	`boolean`default `false`	Shows it. An alternative to the `show()` and `hide()` methods.
`openAction`	`open-actionclick`, `hover-focus`	`PopoverOpenActionPopoverOpenAction.Click`, `.HoverFocus`default `PopoverOpenAction.Click`	The action that opens it: `click` opens it when the anchor is clicked, `hover-focus` when the pointer or focus reaches the anchor. See Open action.
`size`	`sizeextra-small`, `small`, `medium`, `large`, `extra-large`	`SizeSize.ExtraSmall`, `.Small`, `.Medium`, `.Large`, `.ExtraLarge`	The size applied to child buttons that don't specify their own `size` attribute. Children with an explicit `size` attribute keep their own value. See Size.
`skipRestoreFocus`	`skip-restore-focus`	`boolean`default `false`	After closing, does not return focus to the element that was focused before it opened.
`stayOpenOnAction`	`stay-open-on-action`	`boolean`default `false`	Whether the menu stays open after an item is activated. See Staying open.
`stayOpenOnFocusout`	`stay-open-on-focusout`	`boolean`default `false`	Stays open when focus moves outside it. Without this, it closes when focus leaves it, and focus stays where the user moved it. See Staying open.
`stayOpenOnOutsideClick`	`stay-open-on-outside-click`	`boolean`default `false`	Stays open when the user clicks outside it, or presses Escape while focus is outside it. Clicking outside may still close it by moving focus away: see `stayOpenOnFocusout`. See Staying open.
`variant`	`variantprimary`, `secondary`, `tertiary`	`FABMenuVariantFABMenuVariant.Primary`, `.Secondary`, `.Tertiary`default `FABMenuVariant.Primary`, from the style configuration	The color family the menu gives its items: `primary`, `secondary` or `tertiary`. Every item renders as a filled button, whatever its own `variant`. See Variants.

Slots⁠

Slot	Description
`anchor`	The trigger element (button, icon-button, or FAB).
(default)	Default slot for `cw-button` / `cw-toggle-button` / `cw-icon-button` / `cw-toggle-icon-button` menu items.

Events⁠

Event	Type	Detail	Description
`beforetoggle`	`ToggleEvent`	—	Fired before the opening or closing animation begins, whenever `open` is about to change. Cancelable: calling `preventDefault()` leaves the popover in its current state. `newState` is `"open"` or `"closed"`. It bubbles, is composed, and is cancelable.
`toggle`	`ToggleEvent`	—	Fired once the popover has opened or closed, after any animations. `newState` is `"open"` or `"closed"`. It bubbles and is composed.
`item-select`	`ItemSelectEvent`	`ItemSelectEventDetail<string>`	When a menu item is activated. Its `value` is a button's `value`, or a toggle button's `name`. It bubbles and is composed.

The item-select event fires before the menu closes.

Methods⁠

Method	Returns	Description
`hide()`	`void`	Closes it, as setting `open` to false does.
`show()`	`void`	Opens it, as setting `open` to true does.
`toggle()`	`void`	Toggle the menu open/closed.

Props⁠

Prop	Type	Description
`anchor`	`string`	The ID of the element to align to, in the same page or component, in place of the element in the `slot="anchor"` child. It overrides `anchorElement`.
`anchorElement`	`HTMLElement`	The element it aligns to. If `anchor` is set to a non-empty idref string, this resolves to the element with the given id in the same page or component; otherwise to the element assigned to this property, and failing that to its own slotted anchor.Assigning an element is the only way to anchor to one that an id cannot find, such as an element inside another component. Assigning `null` clears such an assignment; it does not clear the slotted anchor.
`externalAnchor`	`boolean`default `false`	Set this when the anchor is elsewhere rather than in the `slot="anchor"` child. It then aligns to the element named by `anchor` or assigned to `anchorElement`.
`fixed`	`boolean`default `false`	A FAB menu is always fixed in place and never scrolls with the page, so setting this has no effect.
`hoverCloseDelay`	`number`default `400`	The delay between the pointer leaving it and it closing, in milliseconds. It applies when `openAction` is `hover-focus`. See Open action.
`hoverOpenDelay`	`number`default `400`	The delay between the pointer entering the anchor and it opening, in milliseconds. It applies when `openAction` is `hover-focus`. See Open action.
`open`	`boolean`default `false`	Shows it. An alternative to the `show()` and `hide()` methods.
`openAction`	`PopoverOpenActionTypePopoverOpenAction.Click`, `.HoverFocus`default `PopoverOpenAction.Click`	The action that opens it: `click` opens it when the anchor is clicked, `hover-focus` when the pointer or focus reaches the anchor. See Open action.
`size`	`SizeTypeSize.ExtraSmall`, `.Small`, `.Medium`, `.Large`, `.ExtraLarge`	The size applied to child buttons that don't specify their own `size` attribute. Children with an explicit `size` attribute keep their own value. See Size.
`skipRestoreFocus`	`boolean`default `false`	After closing, does not return focus to the element that was focused before it opened.
`stayOpenOnAction`	`boolean`default `false`	Whether the menu stays open after an item is activated. See Staying open.
`stayOpenOnFocusout`	`boolean`default `false`	Stays open when focus moves outside it. Without this, it closes when focus leaves it, and focus stays where the user moved it. See Staying open.
`stayOpenOnOutsideClick`	`boolean`default `false`	Stays open when the user clicks outside it, or presses Escape while focus is outside it. Clicking outside may still close it by moving focus away: see `stayOpenOnFocusout`. See Staying open.
`variant`	`FABMenuVariantTypeFABMenuVariant.Primary`, `.Secondary`, `.Tertiary`default `FABMenuVariant.Primary`, from the style configuration	The color family the menu gives its items: `primary`, `secondary` or `tertiary`. Every item renders as a filled button, whatever its own `variant`. See Variants.

Children⁠

Child	Description
a child with `slot="anchor"`	The trigger element (button, icon-button, or FAB).
`children`	Default slot for `CrButton` / `CrToggleButton` / `CrIconButton` / `CrToggleIconButton` menu items.

Events⁠

Prop	Argument	Description
`onBeforeToggle`	`ToggleEvent`	Fired before the opening or closing animation begins, whenever `open` is about to change. Cancelable: calling `preventDefault()` leaves the popover in its current state. `newState` is `"open"` or `"closed"`. It bubbles, is composed, and is cancelable.
`onToggle`	`ToggleEvent`	Fired once the popover has opened or closed, after any animations. `newState` is `"open"` or `"closed"`. It bubbles and is composed.
`onButtonMenuItemSelect`	`ItemSelectEvent`	When a menu item is activated. Its `value` is a button's `value`, or a toggle button's `name`. It bubbles and is composed. Its `detail` carries `value`, `index`, and `label`.

The item-select event fires before the menu closes.

Methods⁠

Call these on the element the ref holds.

Method	Returns	Description
`hide()`	`void`	Closes it, as setting `open` to false does.
`show()`	`void`	Opens it, as setting `open` to true does.
`toggle()`	`void`	Toggle the menu open/closed.

Parameters⁠

Parameter	Type	Description
`Anchor`	`string?`	The ID of the element to align to, in the same page or component, in place of the element in the `AnchorContent` render fragment. It overrides `AnchorElement`.
`AnchorElement`	`ElementReference?`	The element it aligns to. If `Anchor` is set to a non-empty idref string, this resolves to the element with the given id in the same page or component; otherwise to the element assigned to this property, and failing that to its own slotted anchor.Assigning an element is the only way to anchor to one that an id cannot find, such as an element inside another component. Assigning `null` clears such an assignment; it does not clear the slotted anchor.
`ExternalAnchor`	`bool?`default `false`	Set this when the anchor is elsewhere rather than in the `AnchorContent` render fragment. It then aligns to the element named by `Anchor` or assigned to `AnchorElement`.
`Fixed`	`bool?`default `false`	A FAB menu is always fixed in place and never scrolls with the page, so setting this has no effect.
`HoverCloseDelay`	`int?`default `400`	The delay between the pointer leaving it and it closing, in milliseconds. It applies when `OpenAction` is `hover-focus`. See Open action.
`HoverOpenDelay`	`int?`default `400`	The delay between the pointer entering the anchor and it opening, in milliseconds. It applies when `OpenAction` is `hover-focus`. See Open action.
`Open`	`bool?`default `false`	Shows it. An alternative to the `show()` and `hide()` methods.
`OpenAction`	`PopoverOpenAction?PopoverOpenAction.Click`, `.HoverFocus`default `PopoverOpenAction.Click`	The action that opens it: `click` opens it when the anchor is clicked, `hover-focus` when the pointer or focus reaches the anchor. See Open action.
`Size`	`Size?Size.ExtraSmall`, `.Small`, `.Medium`, `.Large`, `.ExtraLarge`	The size applied to child buttons that don't specify their own `Size` attribute. Children with an explicit `Size` attribute keep their own value. See Size.
`SkipRestoreFocus`	`bool?`default `false`	After closing, does not return focus to the element that was focused before it opened.
`StayOpenOnAction`	`bool?`default `false`	Whether the menu stays open after an item is activated. See Staying open.
`StayOpenOnFocusout`	`bool?`default `false`	Stays open when focus moves outside it. Without this, it closes when focus leaves it, and focus stays where the user moved it. See Staying open.
`StayOpenOnOutsideClick`	`bool?`default `false`	Stays open when the user clicks outside it, or presses Escape while focus is outside it. Clicking outside may still close it by moving focus away: see `StayOpenOnFocusout`. See Staying open.
`Variant`	`FABMenuVariant?FABMenuVariant.Primary`, `.Secondary`, `.Tertiary`default `FABMenuVariant.Primary`, from the style configuration	The color family the menu gives its items: `primary`, `secondary` or `tertiary`. Every item renders as a filled button, whatever its own `Variant`. See Variants.

Render fragments⁠

Once you write AnchorContent or any other fragment as a child element, the main content must go in an explicit <ChildContent> too; markup beside <AnchorContent> is a compile error. Here ChildContent is: Default slot for CbButton / CbToggleButton / CbIconButton / CbToggleIconButton menu items.

<CbFabMenu>
    <AnchorContent><CbButton>Open</CbButton></AnchorContent>
    <ChildContent>Main content</ChildContent>
</CbFabMenu>

content_copy

Parameter	Type	Description
`AnchorContent`	`RenderFragment?`	The trigger element (button, icon-button, or FAB).
`ChildContent`	`RenderFragment?`	Default slot for `CbButton` / `CbToggleButton` / `CbIconButton` / `CbToggleIconButton` menu items.

Event callbacks⁠

Parameter	Type	Description
`OnBeforeToggle`	`EventCallback<ToggleEventArgs>`	Fired before the opening or closing animation begins, whenever `Open` is about to change. Cancelable: calling `preventDefault()` leaves the popover in its current state. `newState` is `"open"` or `"closed"`. It bubbles, is composed, and is cancelable.
`OnToggle`	`EventCallback<ToggleEventArgs>`	Fired once the popover has opened or closed, after any animations. `newState` is `"open"` or `"closed"`. It bubbles and is composed.
`OnButtonMenuItemSelect`	`EventCallback<ButtonMenuItemSelectEventArgs<string>>`	When a menu item is activated. Its `value` is a button's `value`, or a toggle button's `name`. It bubbles and is composed. Its `detail` carries `value`, `index`, and `label`.

The item-select event fires before the menu closes.

Inputs⁠

Input	Type	Description
`anchor`	`string`	The ID of the element to align to, in the same page or component, in place of the element in the `anchor` slot. It overrides `anchorElement`.
`anchorElement`	`HTMLElement`	The element it aligns to. If `anchor` is set to a non-empty idref string, this resolves to the element with the given id in the same page or component; otherwise to the element assigned to this property, and failing that to its own slotted anchor.Assigning an element is the only way to anchor to one that an id cannot find, such as an element inside another component. Assigning `null` clears such an assignment; it does not clear the slotted anchor.
`externalAnchor`	`boolean`default `false`	Set this when the anchor is elsewhere rather than in the `anchor` slot. It then aligns to the element named by `anchor` or assigned to `anchorElement`.
`fixed`	`boolean`default `false`	A FAB menu is always fixed in place and never scrolls with the page, so setting this has no effect.
`hoverCloseDelay`	`number`default `400`	The delay between the pointer leaving it and it closing, in milliseconds. It applies when `openAction` is `hover-focus`. See Open action.
`hoverOpenDelay`	`number`default `400`	The delay between the pointer entering the anchor and it opening, in milliseconds. It applies when `openAction` is `hover-focus`. See Open action.
`open`	`boolean`default `false`	Shows it. An alternative to the `show()` and `hide()` methods.
`openAction`	`PopoverOpenActionTypePopoverOpenAction.Click`, `.HoverFocus`default `PopoverOpenAction.Click`	The action that opens it: `click` opens it when the anchor is clicked, `hover-focus` when the pointer or focus reaches the anchor. See Open action.
`size`	`SizeTypeSize.ExtraSmall`, `.Small`, `.Medium`, `.Large`, `.ExtraLarge`	The size applied to child buttons that don't specify their own `size` attribute. Children with an explicit `size` attribute keep their own value. See Size.
`skipRestoreFocus`	`boolean`default `false`	After closing, does not return focus to the element that was focused before it opened.
`stayOpenOnAction`	`boolean`default `false`	Whether the menu stays open after an item is activated. See Staying open.
`stayOpenOnFocusout`	`boolean`default `false`	Stays open when focus moves outside it. Without this, it closes when focus leaves it, and focus stays where the user moved it. See Staying open.
`stayOpenOnOutsideClick`	`boolean`default `false`	Stays open when the user clicks outside it, or presses Escape while focus is outside it. Clicking outside may still close it by moving focus away: see `stayOpenOnFocusout`. See Staying open.
`variant`	`FABMenuVariantTypeFABMenuVariant.Primary`, `.Secondary`, `.Tertiary`default `FABMenuVariant.Primary`, from the style configuration	The color family the menu gives its items: `primary`, `secondary` or `tertiary`. Every item renders as a filled button, whatever its own `variant`. See Variants.

Content projection⁠

Content	Description
an element with `slot="anchor"`	The trigger element (button, icon-button, or FAB).
content with no `slot`	Default slot for `CaButton` / `CaToggleButton` / `CaIconButton` / `CaToggleIconButton` menu items.

Outputs⁠

Output	Event	Description
`cwBeforeToggle`	`ToggleEvent`	Fired before the opening or closing animation begins, whenever `open` is about to change. Cancelable: calling `preventDefault()` leaves the popover in its current state. `newState` is `"open"` or `"closed"`. It bubbles, is composed, and is cancelable.
`cwToggle`	`ToggleEvent`	Fired once the popover has opened or closed, after any animations. `newState` is `"open"` or `"closed"`. It bubbles and is composed.
`cwButtonMenuItemSelect`	`ItemSelectEvent`	When a menu item is activated. Its `value` is a button's `value`, or a toggle button's `name`. It bubbles and is composed. Its `detail` carries `value`, `index`, and `label`.

The item-select event fires before the menu closes.

Methods⁠

Call these on the element the ref holds.

Method	Returns	Description
`hide()`	`void`	Closes it, as setting `open` to false does.
`show()`	`void`	Opens it, as setting `open` to true does.

Props⁠

Prop	Type	Description
`anchor`	`string`	The ID of the element to align to, in the same page or component, in place of the element in the `anchor` slot. It overrides `anchorElement`.
`anchorElement`	`HTMLElement`	The element it aligns to. If `anchor` is set to a non-empty idref string, this resolves to the element with the given id in the same page or component; otherwise to the element assigned to this property, and failing that to its own slotted anchor.Assigning an element is the only way to anchor to one that an id cannot find, such as an element inside another component. Assigning `null` clears such an assignment; it does not clear the slotted anchor.
`externalAnchor`	`boolean`default `false`	Set this when the anchor is elsewhere rather than in the `anchor` slot. It then aligns to the element named by `anchor` or assigned to `anchorElement`.
`fixed`	`boolean`default `false`	A FAB menu is always fixed in place and never scrolls with the page, so setting this has no effect.
`hoverCloseDelay`	`number`default `400`	The delay between the pointer leaving it and it closing, in milliseconds. It applies when `openAction` is `hover-focus`. See Open action.
`hoverOpenDelay`	`number`default `400`	The delay between the pointer entering the anchor and it opening, in milliseconds. It applies when `openAction` is `hover-focus`. See Open action.
`open`	`boolean`default `false`	Shows it. An alternative to the `show()` and `hide()` methods.
`openAction`	`PopoverOpenActionTypePopoverOpenAction.Click`, `.HoverFocus`default `PopoverOpenAction.Click`	The action that opens it: `click` opens it when the anchor is clicked, `hover-focus` when the pointer or focus reaches the anchor. See Open action.
`size`	`SizeTypeSize.ExtraSmall`, `.Small`, `.Medium`, `.Large`, `.ExtraLarge`	The size applied to child buttons that don't specify their own `size` attribute. Children with an explicit `size` attribute keep their own value. See Size.
`skipRestoreFocus`	`boolean`default `false`	After closing, does not return focus to the element that was focused before it opened.
`stayOpenOnAction`	`boolean`default `false`	Whether the menu stays open after an item is activated. See Staying open.
`stayOpenOnFocusout`	`boolean`default `false`	Stays open when focus moves outside it. Without this, it closes when focus leaves it, and focus stays where the user moved it. See Staying open.
`stayOpenOnOutsideClick`	`boolean`default `false`	Stays open when the user clicks outside it, or presses Escape while focus is outside it. Clicking outside may still close it by moving focus away: see `stayOpenOnFocusout`. See Staying open.
`variant`	`FABMenuVariantTypeFABMenuVariant.Primary`, `.Secondary`, `.Tertiary`default `FABMenuVariant.Primary`, from the style configuration	The color family the menu gives its items: `primary`, `secondary` or `tertiary`. Every item renders as a filled button, whatever its own `variant`. See Variants.

Slots⁠

Slot	Description
`default`	Default slot for `CvButton` / `CvToggleButton` / `CvIconButton` / `CvToggleIconButton` menu items.
`anchor`	The trigger element (button, icon-button, or FAB).

Events⁠

Event	Type	Description
`beforeToggle`	`ToggleEvent`	Fired before the opening or closing animation begins, whenever `open` is about to change. Cancelable: calling `preventDefault()` leaves the popover in its current state. `newState` is `"open"` or `"closed"`. It bubbles, is composed, and is cancelable.
`toggle`	`ToggleEvent`	Fired once the popover has opened or closed, after any animations. `newState` is `"open"` or `"closed"`. It bubbles and is composed.
`buttonMenuItemSelect`	`ItemSelectEvent`	When a menu item is activated. Its `value` is a button's `value`, or a toggle button's `name`. It bubbles and is composed. Its `detail` carries `value`, `index`, and `label`.

The item-select event fires before the menu closes.

Methods⁠

Call these on the element the ref holds.

Method	Returns	Description
`hide()`	`void`	Closes it, as setting `open` to false does.
`show()`	`void`	Opens it, as setting `open` to true does.

Props⁠

Prop	Type	Description
`anchor`	`string`	The ID of the element to align to, in the same page or component, in place of the element in the `anchorSnippet` snippet. It overrides `anchorElement`.
`anchorElement`	`HTMLElement`	The element it aligns to. If `anchor` is set to a non-empty idref string, this resolves to the element with the given id in the same page or component; otherwise to the element assigned to this property, and failing that to its own slotted anchor.Assigning an element is the only way to anchor to one that an id cannot find, such as an element inside another component. Assigning `null` clears such an assignment; it does not clear the slotted anchor.
`externalAnchor`	`boolean`default `false`	Set this when the anchor is elsewhere rather than in the `anchorSnippet` snippet. It then aligns to the element named by `anchor` or assigned to `anchorElement`.
`fixed`	`boolean`default `false`	A FAB menu is always fixed in place and never scrolls with the page, so setting this has no effect.
`hoverCloseDelay`	`number`default `400`	The delay between the pointer leaving it and it closing, in milliseconds. It applies when `openAction` is `hover-focus`. See Open action.
`hoverOpenDelay`	`number`default `400`	The delay between the pointer entering the anchor and it opening, in milliseconds. It applies when `openAction` is `hover-focus`. See Open action.
`open`	`boolean`default `false`	Shows it. An alternative to the `show()` and `hide()` methods.
`openAction`	`PopoverOpenActionTypePopoverOpenAction.Click`, `.HoverFocus`default `PopoverOpenAction.Click`	The action that opens it: `click` opens it when the anchor is clicked, `hover-focus` when the pointer or focus reaches the anchor. See Open action.
`size`	`SizeTypeSize.ExtraSmall`, `.Small`, `.Medium`, `.Large`, `.ExtraLarge`	The size applied to child buttons that don't specify their own `size` attribute. Children with an explicit `size` attribute keep their own value. See Size.
`skipRestoreFocus`	`boolean`default `false`	After closing, does not return focus to the element that was focused before it opened.
`stayOpenOnAction`	`boolean`default `false`	Whether the menu stays open after an item is activated. See Staying open.
`stayOpenOnFocusout`	`boolean`default `false`	Stays open when focus moves outside it. Without this, it closes when focus leaves it, and focus stays where the user moved it. See Staying open.
`stayOpenOnOutsideClick`	`boolean`default `false`	Stays open when the user clicks outside it, or presses Escape while focus is outside it. Clicking outside may still close it by moving focus away: see `stayOpenOnFocusout`. See Staying open.
`variant`	`FABMenuVariantTypeFABMenuVariant.Primary`, `.Secondary`, `.Tertiary`default `FABMenuVariant.Primary`, from the style configuration	The color family the menu gives its items: `primary`, `secondary` or `tertiary`. Every item renders as a filled button, whatever its own `variant`. See Variants.

Snippets⁠

Snippet	Description
`anchorSnippet`	The trigger element (button, icon-button, or FAB).
`children`	Default slot for `CsButton` / `CsToggleButton` / `CsIconButton` / `CsToggleIconButton` menu items.

Events⁠

Prop	Type	Description
`onBeforeToggle`	`ToggleEvent`	Fired before the opening or closing animation begins, whenever `open` is about to change. Cancelable: calling `preventDefault()` leaves the popover in its current state. `newState` is `"open"` or `"closed"`. It bubbles, is composed, and is cancelable.
`onToggle`	`ToggleEvent`	Fired once the popover has opened or closed, after any animations. `newState` is `"open"` or `"closed"`. It bubbles and is composed.
`onButtonMenuItemSelect`	`ItemSelectEvent`	When a menu item is activated. Its `value` is a button's `value`, or a toggle button's `name`. It bubbles and is composed. Its `detail` carries `value`, `index`, and `label`.

The item-select event fires before the menu closes.

Methods⁠

Call these on the element the ref holds.

Method	Returns	Description
`hide()`	`void`	Closes it, as setting `open` to false does.
`show()`	`void`	Opens it, as setting `open` to true does.

A value is what the token defaults to; selecting it copies the token's name.

Tokens⁠

Token	Value
`--ct-fab-menu-container-color`	`--ct-sys-color-primary-container` `--ct-fab-menu-container-color`
`--ct-fab-menu-icon-color`	`--ct-sys-color-on-primary-container` `--ct-fab-menu-icon-color`
`--ct-fab-menu-item-spacing`	`16px` `--ct-fab-menu-item-spacing`
`--ct-fab-menu-label-text-color`	`--ct-sys-color-on-primary-container` `--ct-fab-menu-label-text-color`
`--ct-fab-menu-position-area`	`block-start span-inline-start` `--ct-fab-menu-position-area`

Names and states⁠

A FAB menu follows the WAI-ARIA Authoring Practices: Menu Button pattern: the anchor is a button that opens a menu of buttons.

Assistive technology announces the menu as a menu and each item as a menu item.
The anchor is announced as a menu button, expanded while the menu is open.
Each item is named by its label. An anchor that shows only an icon has no name until you give it an aria-label.
On a floating action button, only aria-label has any effect; other aria-* attributes are ignored.
Only a button, a toggle button, an icon button, or a toggle icon button works as an item; anything else in the default slot logs a console warning.

Keyboard and focus⁠

Key	Action
Tab	Moves focus to the anchor; while the menu is open, closes it
Enter	Opens the menu from the anchor; activates the focused item
Space	Opens the menu from the anchor; activates the focused item
Arrow Down	Moves focus to the next enabled item, wrapping at the end
Arrow Up	Moves focus to the previous enabled item, wrapping at the start
Home	Moves focus to the first item
End	Moves focus to the last item
Escape	Closes the menu

Tab, the arrow keys, Home, End, and Escape are the menu's own handling. Enter and Space work the same way on the anchor and on an item.

Opening the menu moves focus to its first enabled item.
Closing it returns focus to the anchor, unless skip-restore-focus is set.
Each button draws a focus ring on keyboard focus.
A disabled item is skipped by the arrow keys.

Pointer and touch⁠

The anchor and each item have a touch target of at least 48 by 48 pixels, which meets the 24 by 24 pixel minimum of WCAG 2.5.8.
A click on an item fires item-select; a click outside the menu closes it, unless stay-open-on-outside-click is set.
With hover-focus, hovering the anchor opens the menu after a delay, and the same actions stay available from the keyboard.

Display settings⁠

Forced colors: the menu surface draws a 1px ButtonText outline, and a focused item draws a 2px Highlight outline. The buttons keep their own forced-colors styling.
Reduced motion: the menu opens and closes without animation.
Right to left: items sit against the anchor's inline edge and follow the reading direction when the menu's position uses logical keywords. A position that uses a physical keyword, such as left, stays on that side.

Standards⁠

With its defaults, the FAB menu meets four WCAG 2.2 success criteria:

2.1.1 Keyboard (A)
2.1.2 No Keyboard Trap (A)
2.5.2 Pointer Cancellation (A)
2.4.7 Focus Visible (AA)

Three more depend on how you use it:

4.1.2 Name, Role, Value (A): give an icon-only anchor an aria-label.
2.5.3 Label in Name (A): keep the visible label's words in any aria-label.
2.4.6 Headings and Labels (AA): label each action with words that say what it does.

Reference docs⁠link

Choosing a button⁠link

Used together⁠link

Choosing a variant⁠link

Built in⁠link

Hidden content renders when first shown⁠link

Using FAB menus well⁠link

Variants⁠link

Size⁠link

Open action⁠link

Staying open⁠link

Properties⁠link

Slots⁠link

Events⁠link

Methods⁠link

Props⁠link

Children⁠link

Events⁠link

Methods⁠link

Parameters⁠link

Render fragments⁠link

Event callbacks⁠link

Inputs⁠link

Content projection⁠link

Outputs⁠link

Methods⁠link

Props⁠link

Slots⁠link

Events⁠link

Methods⁠link

Props⁠link

Snippets⁠link

Events⁠link

Methods⁠link

Tokens⁠link

Names and states⁠link

Keyboard and focus⁠link

Pointer and touch⁠link

Display settings⁠link

Standards⁠link

Reference docs⁠

Choosing a button⁠

Used together⁠

Choosing a variant⁠

Built in⁠

Hidden content renders when first shown⁠

Using FAB menus well⁠

Variants⁠

Size⁠

Open action⁠

Staying open⁠

Properties⁠

Slots⁠

Events⁠

Methods⁠

Props⁠

Children⁠

Events⁠

Methods⁠

Parameters⁠

Render fragments⁠

Event callbacks⁠

Inputs⁠

Content projection⁠

Outputs⁠

Methods⁠

Props⁠

Slots⁠

Events⁠

Methods⁠

Props⁠

Snippets⁠

Events⁠

Methods⁠

Tokens⁠

Names and states⁠

Keyboard and focus⁠

Pointer and touch⁠

Display settings⁠

Standards⁠