rc-fab-menu
Floating action button menu wrapper for an rc-menu action surface.
Use this when a primary floating action needs a short menu of related commands.
The component specializes rc-menu-button, so it keeps menu keyboard behavior,
light dismiss, focus return, and anchor positioning while adding FAB placement
and reveal styling.
- Package
@rcarls/rc-fab-menu- Element
<rc-fab-menu>- Native dependency
- Consumer-supplied trigger button plus rc-menu
- State model
- Controlled or uncontrolled open state inherited from rc-menu-button
- Main events
rc-fab-menu-togglerc-menu-activate
Installation
- npm
- Yarn
npm install @rcarls/rc-fab-menu
yarn add @rcarls/rc-fab-menu
import '@rcarls/rc-fab-menu/define';
Usage
Place a native trigger button in the trigger slot and an rc-menu in the
default slot. Listen for rc-menu-activate on the menu or wrapper to handle the
chosen action.
<rc-fab-menu>
<button slot="trigger" type="button" aria-label="Create">
<span aria-hidden="true">+</span>
</button>
<rc-menu label="Create">
<button data-value="recipe">Recipe</button>
<button data-value="collection">Collection</button>
</rc-menu>
</rc-fab-menu>
The trigger receives aria-haspopup="menu" and aria-expanded from the
inherited menu-button behavior. The popup opens above the trigger by default
with placement="top-end".
Without a theme, the trigger remains a native-looking button. Apply a packaged theme to opt into FAB dimensions, shape, elevation, typography, and motion.
Live demo
Material sizing
Material FAB sizes are theme concerns rather than component API values. With
rc-theme-material, use modifier classes on the host:
<rc-fab-menu class="rc-fab--large">
<button slot="trigger" type="button" aria-label="Create">+</button>
<rc-menu label="Create">...</rc-menu>
</rc-fab-menu>
The same rc-fab--small and rc-fab--large classes work on rc-fab.
API
rc-fab-menu inherits open, defaultOpen, placement, openMenu(),
closeMenu(), and toggleMenu() from rc-menu-button.
Properties
| Property | Markup | Type | Default | Description |
|---|---|---|---|---|
position | position | RCFabMenuPosition | 'bottom-end' | Viewport corner where the floating action menu trigger is anchored. |
placement | placement | AnchorPlacement | 'top-end' | Preferred placement of the action menu relative to the trigger button. |
open | open | boolean | Not specified | Applies open state in controlled mode without dispatching an event. |
defaultOpen | default-open | boolean | Not specified | Applies the uncontrolled default before any controlled write occurs. |
orientation | orientation | 'horizontal' | 'vertical' | undefined | Not specified | Orientation of this menu button, affects which arrow keys open/close the menu. If not set, inherits from a parent rc-menubar or element with role="menubar". |
Methods
| Method | Description |
|---|---|
openMenu(focusTarget: 'first' | 'last') | Opens the menu and moves focus into it. |
closeMenu(returnFocus: unknown) | Closes the menu. |
toggleMenu() | Toggles the menu between open and closed. |
focus(options?: FocusOptions) | Overrides the default focus() so that programmatic focus calls (e.g. from a roving-tabindex parent navigating back to this element via arrow keys) always reach the trigger. Chrome's delegatesFocus will not delegate to a tabindex="-1" element, so when the toolbar marks this host inactive it suppresses the trigger — and the next focusItem() call silently fails. Lifting the suppression here and directly calling trigger.focus() bypasses that restriction. |
Events
| Event | Detail type | Description |
|---|---|---|
rc-fab-menu-toggle | CustomEvent | Fired when user interaction opens or closes the action menu. |
rc-menu-button-toggle | CustomEvent | Fired when the menu opens or closes |
Slots
| Name | Description |
|---|---|
trigger | Native button or button-like element that opens the action menu. |
default | `rc-menu` element containing floating action commands. |
indicator | Optional decorative indicator rendered at the trigger's inline end |
CSS Custom Properties
| Property | Default | Description |
|---|---|---|
--rc-fab-menu-position-css | fixed | CSS position value for the floating wrapper. |
--rc-fab-menu-inset-block | 1.5rem | Distance from the block-axis edge; falls back through --rc-fab-inset-block. |
--rc-fab-menu-inset-inline | 1.5rem | Distance from the inline-axis edge; falls back through --rc-fab-inset-inline. |
--rc-fab-menu-z-index | 10 | Stacking order for the floating wrapper; falls back through --rc-fab-z-index. |
--rc-fab-menu-trigger-gap | Not specified | Gap between trigger icon and label content. No default. |
--rc-fab-menu-size | Not specified | Trigger minimum inline and block size. No default; set explicitly or apply a theme. |
--rc-fab-menu-padding-block | Not specified | Trigger block-axis padding (defers to native button padding when unset). |
--rc-fab-menu-padding-inline | Not specified | Trigger inline-axis padding (defers to native button padding when unset). |
--rc-fab-menu-appearance | Not specified | Trigger appearance (defers to native button appearance when unset). |
--rc-fab-menu-border | Not specified | Trigger border (defers to native button border when unset). |
--rc-fab-menu-radius | Not specified | Trigger border radius (defers to native button radius when unset). |
--rc-fab-menu-bg | Not specified | Trigger background (defers to native button background when unset). |
--rc-fab-menu-color | Not specified | Trigger foreground color (defers to native button color when unset). |
--rc-fab-menu-shadow | Not specified | Trigger elevation shadow (defers to native button shadow when unset). |
--rc-fab-menu-font | Not specified | Trigger font shorthand (defers to native button font when unset). |
--rc-fab-menu-font-family | Not specified | Trigger font family (defers to native button font-family when unset). |
--rc-fab-menu-font-size | Not specified | Trigger font size (defers to native button font-size when unset). |
--rc-fab-menu-font-weight | Not specified | Trigger font weight (defers to native button font-weight when unset). |
--rc-fab-menu-letter-spacing | Not specified | Trigger letter spacing (defers to native button letter-spacing when unset). |
--rc-fab-menu-text-decoration | Not specified | Trigger text decoration (defers to native button text-decoration when unset). |
--rc-fab-menu-user-select | Not specified | Trigger user-select (defers to native button user-select when unset). |
--rc-fab-menu-transition | Not specified | Trigger transition shorthand (defers to native button transition when unset). |
--rc-fab-menu-bg-hover | Not specified | Trigger hover background (defers to native button hover styling when unset). |
--rc-fab-menu-shadow-hover | Not specified | Trigger hover elevation shadow (defers to native button hover styling when unset). |
--rc-fab-menu-bg-open | Not specified | Trigger background while the menu is open (defers to native button styling when unset). |
--rc-fab-menu-shadow-open | Not specified | Trigger elevation shadow while the menu is open (defers to native button styling when unset). |
--rc-fab-menu-shadow-active | Not specified | Trigger pressed elevation shadow (defers to native button styling when unset). |
--rc-fab-menu-active-transform | Not specified | Trigger transform while pressed (defers to native button styling when unset). |
--rc-fab-menu-focus-ring | Not specified | Trigger focus ring (defers to native button focus styling when unset). |
--rc-fab-menu-focus-ring-offset | Not specified | Trigger focus ring offset (defers to native button focus styling when unset). |
--rc-fab-menu-disabled-opacity | Not specified | Trigger opacity while disabled (defers to native disabled styling when unset). |
--rc-fab-menu-disabled-shadow | Not specified | Trigger elevation shadow while disabled (defers to native disabled styling when unset). |
--rc-fab-menu-popup-z-index | 1000 | Stacking order of the popup container; falls back through --rc-menu-button-popup-z-index. |
--rc-fab-menu-popup-duration | 0ms | Popup reveal transition duration. |
--rc-fab-menu-popup-transform-origin | bottom right | Popup reveal transform origin. |
--rc-menu-button-trigger-block-size | var(--rc-control-block-size) | Minimum block size of the trigger |
--rc-menu-button-trigger-padding-block | var(--rc-control-padding-block) | Trigger block-axis padding |
--rc-menu-button-trigger-padding-inline | var(--rc-control-padding-inline) | Trigger inline-axis padding |
--rc-menu-button-trigger-gap | var(--rc-item-gap) | Gap between flex children in the trigger |
--rc-menu-button-trigger-border | var(--rc-border) | Trigger border |
--rc-menu-button-trigger-radius | var(--rc-control-radius) | Trigger border radius |
--rc-menu-button-trigger-background | var(--rc-button-bg) | Trigger background |
--rc-menu-button-trigger-color | var(--rc-button-text) | Trigger text color |
--rc-menu-button-trigger-transition | Not specified | CSS transition applied to the trigger |
--rc-menu-button-trigger-hover-background | color-mix(in srgb, Highlight 8%, transparent) | Trigger hover background |
--rc-menu-button-trigger-hover-color | inherit | Trigger hover text color |
--rc-menu-button-trigger-hover-border-color | currentColor | Trigger hover border color |
--rc-menu-button-trigger-open-background | color-mix(in srgb, Highlight 12%, transparent) | Trigger background when the menu is open |
--rc-menu-button-trigger-open-color | inherit | Trigger text color when the menu is open |
--rc-menu-button-trigger-open-border-color | currentColor | Trigger border color when the menu is open |
--rc-menu-button-indicator-size | 1em | Inline and block size of the slotted indicator |
--rc-menu-button-indicator-color | currentColor | Color of the slotted indicator |
--rc-menu-button-indicator-inset | var(--rc-menu-button-trigger-padding-inline) | Indicator distance from the trigger's inline end |
--rc-menu-button-popup-z-index | 1000 | Z-index of the popup overlay |
CSS Parts
| Part | Description |
|---|---|
root | The root popup anchor inherited from `rc-menu-button`. |
popup | The popup container inherited from `rc-menu-button`. |