Floating Action Button

Basic

HTML

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

Horizontal FAB

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

HTML

<div class="fixed-action-btn horizontal-fab">    <a class="btn-floating btn-large">        <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>

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-toggleclass to the FAB.

HTML

<div class="fixed-action-btn fab-click-to-toggle">    <a class="btn-floating btn-large">        <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>