Floating Action Button

Materialize is a modern responsive CSS framework based on Material Design by Google.

If you want a fixed floating action button, you can add multiple actions that will appear on hover. Our demo is in the bottom righthand corner of the page. 

        Copied!
        content_copy
        
<div class="fixed-action-btn">
  <a class="btn-floating btn-large">
    <i class="large material-icons">mode_edit</i>
  </a>
  <ul>
    <li><a class="btn-floating"><i class="material-icons">insert_chart</i></a></li>
    <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
    <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
    <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
  </ul>
</div>

Initialization

            Copied!
            content_copy
            
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.fixed-action-btn');
    var instances = M.FloatingActionButton.init(elems, {
      // specify options here
    });
  });

Options

Name Type Default Description
direction String 'top' Direction FAB menu opens. Can be 'top', 'right', 'bottom', 'left'
hoverEnabled Boolean true If true, FAB menu will open on hover instead of click
toolbarEnabled Boolean false Enable transit the FAB into a toolbar on click
Methods

All the methods are called on the plugin instance. You can get the plugin instance like this: 

              Copied!
              content_copy
              
  var instance = M.FloatingActionButton.getInstance(elem);
.open();

Opens FAB.


instance.open();
.close();

Closes FAB.


instance.close();
.destroy();

Destroy plugin instance and teardown


instance.destroy();

Properties

Name Type Description
el Element The DOM element the plugin was initialized with.
options Object The options the instance was initialized with.
isOpen Boolean Describes open/close state of the FAB.

Horizontal FAB

Creating a horizontal FAB is easy! Just set the direction option.

          Copied!
          content_copy
          
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.fixed-action-btn');
    var instances = M.FloatingActionButton.init(elems, {
      direction: 'left'
    });
  });
mode_edit

Click-only FAB

If you want to disable the hover behaviour, and instead toggle the FAB menu when the user clicks on the large button (works great on mobile!), just add the click-to-toggle class to the FAB.

          Copied!
          content_copy
          
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.fixed-action-btn');
    var instances = M.FloatingActionButton.init(elems, {
      direction: 'left',
      hoverEnabled: false
    });
  });

FAB to Toolbar

Instead of displaying individual button options, you can transition your FAB into a toolbar on click. Just add the toolbar class to the FAB.

          Copied!
          content_copy
          
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.fixed-action-btn');
    var instances = M.FloatingActionButton.init(elems, {
      toolbarEnabled: true
    });
  });