Material Design 3Actions
FAB Menu
A Floating Action Button that expands to reveal multiple related actions. FAB menus are ideal when there are 3-6 related actions that stem from a primary action.
Overview
The FAB Menu (also known as Speed Dial) extends the standard FAB with an expandable menu of secondary actions. When tapped, it reveals a set of related actions in a vertical or horizontal arrangement. This pattern is useful when the primary action has multiple variations or sub-actions.
Live Preview
Content Area
Share
Upload
Create
Menu Variants
Brand Properties
The following table shows FAB Menu properties with Material Design 3 defaults and brand-specific values.
| Property | Type | Material Default | HoB Value | TAE Value |
|---|---|---|---|---|
| Main FAB Size | Dimension | 56px | 56px | 56px |
| Menu Item Size | Dimension | 40px | 40px | 40px |
| Menu Item Spacing | Dimension | 16px | 12px | 16px |
| Main FAB Corner Radius | Dimension | 16px | 12px | 12px |
| Menu Item Corner Radius | Dimension | 12px | 8px | 8px |
| Main FAB Color | Color | #6750A4 | #038012 | #1A5129 |
| Menu Item Background | Color | #FFFFFF | #FFFFFF | #FFFFFF |
| Menu Item Icon Color | Color | #6750A4 | #038012 | #1A5129 |
| Label Background | Color | #FFFFFF | #FFFFFF | #FFFFFF |
| Label Text Color | Color | #1C1B1F | #038012 | #1A1A1A |
| Label Font | Font Family | Roboto | Open Sans | Open Sans |
| Label Font Size | Font Size | 14px | 14px | 14px |
| Label Font Weight | Font Weight | 500 | 500 | 600 |
| Scrim Opacity | Percentage | 32% | 20% | 32% |
| Animation Duration | Time | 250ms | 200ms | 200ms |
| Animation Easing | Easing | ease-out | ease-out | ease-out |
| Rotation on Open | Degree | 45deg | 45deg | 45deg |
States
Closed
Open
Focused
Accessibility
- Main FAB should have
aria-expandedto indicate menu state - Menu items should be keyboard navigable with arrow keys
- Escape key should close the menu and return focus to FAB
- Labels should be associated with menu item buttons via
aria-labelledby - Scrim should be dismissible by clicking outside or pressing Escape
Do's and Don'ts
Do
- Limit menu items to 3-6 related actions
- Use descriptive labels for each action
- Animate the opening/closing smoothly
- Show scrim to focus attention on menu
Don't
- Include more than 6 actions in the menu
- Use for unrelated or primary navigation
- Mix destructive actions with constructive ones
- Open the menu without user interaction
Related Components
- FAB - Standard floating action button
- Icon Button - For menu item buttons
- Navigation Components - Bottom sheets, drawers