Fab buttons
Material toggle buttons
Inbox by Gmail

Floating fab buttons

Floating fab menu Bottom right position
Floating fab menu Top right position
Floating fab menu Bottom left position
Floating fab menu Top left position
Fab menu classes
Class Description
Positions and directions
.fab-menu-top-left Top left position. Can have absolute and fixed positions, also can be sticked to top on page scroll
.fab-menu-top-right Top right position. Can have absolute and fixed positions, also can be sticked to top on page scroll
.fab-menu-bottom-left Bottom left position. Can have absolute and fixed positions
.fab-menu-bottom-right Bottom right position. Can have absolute and fixed positions
Menu positioning
.fab-menu-absolute Absolute positioning. Can be used in any container
.fab-menu-fixed Fixed positioning. Can be used in main container only, relative to page layout
.fab-menu-affixed Sticky menu. Can be used in main container only, relative to page layout. Supported in top positions only
Menu visibility
data-fab-toggle="click" Open menu on click. Applies to main menu container that has .fab-menu class
data-fab-toggle="hover" Open menu on hover. Applies to main menu container that has .fab-menu class
data-fab-state="opened" Display menu on page load. Works only with data-fab-toggle="click" option
Inner button labels
data-fab-label="..." Text label to display on inner button hover. Must be added to <div> element inside inner menu item
.fab-label-right Display labels on the right side. Default position is left. Must be added to <div> element inside inner menu item
.fab-label-light Use this class if you want to display light labels instead of default dark. Must be added to <div> element inside inner menu item
.fab-label-visible By default, all labels appear on hover. To make them always visible, add this class to <div> element inside inner menu item