Material Floating Action Button In JavaScript – Bubbler

Category: Javascript , Menu & Navigation | June 30, 2017
Views Total:7,127 views
Official Page:Go to website
Last Update:June 30, 2017


Material Floating Action Button In JavaScript – Bubbler


Bubbler is a small JavaScript library helps you create a Material Design style floating button which expands a vertical popup menu on hover. No 3rd library and framework required.

How to use it:

Download and include the Bubbler’s files on the html page.

<link rel="stylesheet" href="bubbler.min.css">
<script src="bubbler.min.js"></script>

Include the Font Awesome iconic font for the menu icons.

<link rel="stylesheet" href="/path/to/font-awesome.min.css">

Create the custom menu items in the JavaScript.

var options =
    label: 'Run alert function',
    callback: function() {
    icon:'<i class="fa fa-id-card" aria-hidden="true"></i>',
    label: 'Test Element 2'
    label: 'Test Element 3',
    display: {
      color: 'blue',
      background: 'red'

Initialize the bubbler and done.

var context = new Bubbler(options);

You Might Be Interested In:

One thought on “Material Floating Action Button In JavaScript – Bubbler

Leave a Reply