Floating Action Buttons

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.

                                    
                                        <div class="fixed-action-btn">
                                          <a class="btn-floating btn-large red">
                                            <i class="large material-icons">mode_edit</i>
                                          </a>
                                          <ul>
                                            <li><a class="btn-floating red"><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

                                    
                                        var elem = document.querySelector('.fixed-action-btn');
                                        var instance = M.FloatingActionButton.init(elem, options);

                                          // Or with jQuery

                                        $(document).ready(function(){
                                            $('.fixed-action-btn').floatingActionButton();
                                        });
                                    
                                

Options

Name	Type	Default	Description
direction	String	'top'	Direction FAB menu opens. Can be 'top', 'right', 'buttom', '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

Because jQuery is no longer a dependency, all the methods are called on the plugin instance. You can get the plugin instance like this:

                                    
                                    var instance = M.FloatingActionButton.getInstance(elem);

                                    /* jQuery Method Calls
                                        You can still use the old jQuery plugin method calls.
                                        But you won't be able to access instance properties.

                                        $('.fixed-action-btn').floatingActionButton('methodName');
                                        $('.fixed-action-btn').floatingActionButton('methodName', paramName);
                                    */
                                    
                                

.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.

                                    
                                        var elem = document.querySelector('.fixed-action-btn');
                                        var instance = M.FloatingActionButton.init(elem, {
                                            direction: 'left'
                                        });
                                    
                                

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.

                                    
                                        var elem = document.querySelector('.fixed-action-btn');
                                        var instance = M.FloatingActionButton.init(elem, {
                                            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.

                                    
                                        var elem = document.querySelector('.fixed-action-btn');
                                        var instance = new M.FloatingActionButton(elem, {
                                            toolbarEnabled: true
                                        });

                                        // Or with jQuery

                                        $('.fixed-action-btn').floatingActionButton({
                                            toolbarEnabled: true
                                        });