Home Documentation
Getting started General
Components
Forms
Utilities
Sass Plugins
Check changelog.
1.0.0-beta.2

FAB Menu (Floating Action Button)

Creating a FAB menu (Floating Action Button) is useful if you want to group some actions inside the same button.

To create your FAB menu, you have to create a first .fab div.
This .fab must contain a .fab-trigger which is gonna trigger the .fab-menu.

Javascript initialization

Once HTML was setup, you can activate the FAB menu with this simple code.
Just pass the id of your FAB that you want to activate.

To know all the ways to initialize a JS component, please read the JS Init page.

Options

Property Default value Description
animationDuration 300 Opening and closing animation duration in ms.
hover true When 'hover' is set to true, the .fab-trigger will trigger the .fab-menu on hover instead of click.
direction top Set the appearance direction of the .fab-menu.
Accepted values are 'top' 'bottom' 'left' and 'right'.
position bottom-right Change the position of the FAB.
Accepted values are 'bottom-right' 'bottom-left' 'top-right' and 'top-left'.
offsetX 1rem Add a spacing on the X axis (if the position is set to 'bottom-right' the offsetX will automatically add the offset on the right).
offsetY 1.5rem Add a spacing on the Y axis (if the position is set to 'bottom-right' the offsetX will automatically add the offset on the bottom).

Methods

Method Description
.open() Open fab
.close() Close fab

Events

Event Description
ax.fab.setup Event sent when the FAB has been setup.
ax.fab.open Event sent when the open() method is called.
ax.fab.close Event sent when the close() method is called.