# FAB menu
A FAB menu opens from a FAB to show several related actions, and the FAB becomes its close button.
**Example: A FAB menu with three actions**
```html
mail
Messages
archive
Archive
share
Share
```
## Usage guidelines
* **Open it from a FAB.** The menu appears where the FAB was, and not from an extended FAB or any other component.
* **Keep it related.** A menu holds 2 to 6 closely related actions under one purpose, such as sharing.
* **Align to the trailing edge.** The FAB and menu sit at the trailing edge of the window, mirrored in right-to-left languages.
* **Always label items.** Every item needs a text label.
This component is new in [M3 Expressive](https://m3.material.io/blog/building-with-m3-expressive).
## Anatomy
A FAB menu holds items and a FAB that toggles it. Both icons can be replaced.
**Example: An open FAB menu with custom toggle icons and two items**
```html
add
close
edit
Note
checklist
List
```
## Examples
### Colors
Set `color` to `primary` (default), `secondary` or `tertiary`.
**Example: A tertiary FAB menu**
```html
edit
Edit
delete
Delete
```
### Size
Set `size` to `md` or `lg` for a larger FAB.
**Example: A large FAB menu**
```html
edit
Edit
delete
Delete
```
### Start alignment
Set `align="start"` to align the items to the start edge, as for a FAB at the leading side.
**Example: A FAB menu aligned to the start**
```html
edit
Edit
delete
Delete
```
### Open and events
Set `open` to open the menu from code. The `toggle` event fires before it opens or closes and `activate` fires before an item closes it; cancel either to keep the menu as it is.
**Example: A FAB menu that stays open when an item is activated**
*HTML*
```html
edit
Edit
delete
Delete
```
*TypeScript*
```ts
const menu = document.querySelector('md-gb-fab-menu')!;
const status = document.querySelector('#status')!;
menu.addEventListener('activate', (event) => {
status.textContent = 'Activated';
// Cancel to keep the menu open.
event.preventDefault();
});
```
## Accessibility
* Name the menu with `aria-label`, such as "Message actions". It labels the toggle button.
* The toggle button exposes whether the menu is expanded or collapsed.
* Tab moves through the button and the items, and Enter or Space activates the focused one.
* A menu over scrolling content shouldn't hide focused elements. Register it with `setupScrollPadding()` from `appbar/scroll-padding.js`.
## API reference
### <md-gb-fab-menu>
A Material Design component.
#### Properties
| Property | Attribute | Type | Default |
| --- | --- | --- | --- |
| align
The alignment of the items. Defaults to the end, as the FAB. | align | FabMenuAlign | FAB_MENU_ALIGNS.end |
| color
The color of the FAB, close button and items. | color | FabMenuColor | FAB_MENU_COLORS.primary |
| open
Whether the menu is open. | open | boolean | false |
| size
The size of the FAB. The close button is always the same size. | size | FabSize | 'default' |
#### Slots
| Slot | Description |
| --- | --- |
| default | The menu's items, typically <md-gb-fab-menu-item>s. |
| close-icon | The close button's icon. Defaults to a "close" icon. |
| icon | The FAB's icon. Defaults to an "add" icon. |
#### Events
| Event | Description |
| --- | --- |
| activate
CustomEvent<FabMenuActivateDetail> | Fired when an item is activated, before the menu closes. Cancel it to keep the menu open. |
| toggle
ToggleEvent | Fired when the menu opens or closes from user interaction, before the change. Cancel it to keep the menu as it is. |
#### CSS parts
| Part | Description |
| --- | --- |
| ::part(button) | The FAB that toggles the menu. |
| ::part(fab-menu) | The menu's root element. |
| ::part(list) | The menu's list of items. |
#### CSS custom properties
| Property | Description |
| --- | --- |
| --close-button-between-space | |
| --close-button-container-elevation | |
| --close-button-container-height | |
| --close-button-container-shape | |
| --close-button-container-width | |
| --close-button-icon-size | |
| --item-between-space | |
| --item-container-elevation | |
| --item-container-height | |
| --item-container-shape | |
| --item-icon-label-space | |
| --item-icon-size | |
| --item-label-text | |
| --item-label-text-axes | |
| --item-label-text-tracking | |
| --item-leading-space | |
| --item-trailing-space | |
### <md-gb-fab-menu-item>
A Material Design component.
#### Slots
| Slot | Description |
| --- | --- |
| default | The item's label. FAB menu items should always have a label. |
| icon | The item's leading icon. |
#### CSS parts
| Part | Description |
| --- | --- |
| ::part(item) | The item's container. |