RadzenFabMenu provides quick access to multiple actions, expanding from a single floating action button to reduce clutter and improve discoverability.
These demos showcase FAB menus with various button text/icon configurations, expandable menu items, customizable expansion directions (top/bottom/left/right), click handling, keyboard navigation, and accessibility features like aria-label support.
A FAB menu can contain 2–6 items, which should be closely related and grouped under a single primary action (e.g., Add).
The Direction property of the RadzenFabMenu component controls the direction in which the menu items expand from the FAB. This property accepts values from the FabMenuDirection enum and determines both the visual layout and positioning of the menu items. By default, the menu items expand upward arranged vertically (bottom to top) and right-aligned with the FAB.
You can use the AriaLabel parameter in RadzenFabMenu components:
The following keys or key combinations provide a way for users to navigate and interact with Radzen Blazor FAB Menu component.
| Press this key | To do this |
|---|---|
| Tab | Navigate to a FAB Menu. |
| Enter or Space on FAB Menu toggle button | Click and expand/collapse menu items. |
| Tab in expanded FAB Menu | Navigate to a FAB Menu item. |
| Enter or Space on FAB Menu item | Click the focused FAB Menu item. |