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 |