Floating Speed Dial
The Floating Speed Dial is an expanded version of the Floating Action Button. Instead of opening a single URL on tap, it expands into a set of smaller child buttons — each with its own icon, label, and destination. It is ideal when you want to surface multiple quick actions without cluttering your navigation bar.
Position
Choose where the speed dial appears at the bottom of the screen.
| Option | Description |
|---|---|
| Left | Anchored to the bottom-left corner |
| Center | Centered at the bottom |
| Right | Anchored to the bottom-right corner (default) |
| Left Dock to Bottom Nav Bar | Left-aligned, attached directly above the bottom navigation bar |
| Center Dock to Bottom Nav Bar | Centered, attached directly above the bottom navigation bar |
| Right Dock to Bottom Nav Bar | Right-aligned, attached directly above the bottom navigation bar |
Use a docked position when you also have a Bottom Navigation Bar enabled to keep everything visually aligned.
Main Button
Background Color
Set the background color of the main trigger button for both Light and Dark themes.
- Light Mode default:
#186E62 - Dark Mode default:
#186E62
Icon
Tap the icon field to open the icon picker and choose a Material Icon for the main button. The default is a plus icon, which signals to users that tapping will expand more options.
Icon Color
Set the color of the icon inside the main button.
- Light Mode default:
#ffffff - Dark Mode default:
#ffffff
Child Items
Item Label Position
Choose where the text label of each child item appears relative to its icon.
| Option | Description |
|---|---|
| Left of the navigation item | Label appears to the left of the icon (default) |
| Right of the navigation item | Label appears to the right of the icon |
Item Background Color
Set the background color of the child buttons that expand when the main button is tapped.
- Light Mode default:
#186E62 - Dark Mode default:
#186E62
Item Icon Color
Set the icon color for the child buttons.
- Light Mode default:
#ffffff - Dark Mode default:
#ffffff
Navigation Items
Each child item has three parts:
- Icon — Tap the icon button to open the icon picker and choose a Material Icon.
- Title — The label shown next to the icon. Keep labels short and descriptive.
- Action URL — The page that opens when the user taps the item.
Keep your list to 2–5 items for the best usability. Too many items make the expanded dial feel overwhelming.
Visibility Rules
You can control which pages show the speed dial and which pages hide it.
Show Floating Speed Dial Only on These URLs
The speed dial will only appear when the current URL matches one of the patterns you specify. On all other pages, it is hidden.
Hide Floating Speed Dial on These URLs
The speed dial is visible everywhere except on pages that match the patterns you specify.
Enter one domain, full URL, or URL fragment per line. Both fields support wildcard patterns (*) for dynamic paths and square brackets [ ] for exact URL matches.
| Example | Matches |
|---|---|
example.com/shop | Any URL containing /shop |
[example.com/checkout] | Only the exact URL example.com/checkout |
example.com/*/product | URLs like example.com/1/product, example.com/store/product |