Skip to main content

Speed Dial

Floating Action Button menu that expands to reveal a suite of secondary quick actions with staggered transitions.

Speed Dial Example

Click the floating action trigger at the bottom right to toggle secondary actions.

Edit Document
Share Link
Print 
<div class="fab-menu fab-bottom-end" data-boodoo="speed-dial">
  <button type="button" class="btn btn-primary btn-fab fab-trigger" aria-label="Menu">
    <span>+</span>
  </button>
  <div class="fab-actions">
    <div class="fab-action-item">
      <span class="fab-label"><span>Edit</span></span>
      <button type="button" class="btn btn-secondary btn-fab fab-sm" aria-label="Edit"><span>✎</span></button>
    </div>
    <div class="fab-action-item">
      <span class="fab-label"><span>Share</span></span>
      <button type="button" class="btn btn-info btn-fab fab-sm" aria-label="Share"><span>🔗</span></button>
    </div>
  </div>
</div>