Floating action button
Floating action button (FAB) menu - very useful component to display a single floating button with or without nested menu. Supports plenty of different styling, interaction and direction options and can be added nearly to any container within page layout or to page itself. By default, it supports top and bottom menu direction, but can be easily extended to left and right directions with simple CSS additions. Inner elements can be either buttons with single icon or image thumbnails.
Default FAB menu markup:
<!-- Clickable menu -->
<div class="fab-menu" data-fab-toggle="click">
<a class="fab-menu-btn btn btn-primary btn-icon rounded-pill">
<div class="m-1">
<i class="fab-icon-open ph-plus"></i>
<i class="fab-icon-close ph-x"></i>
</div>
</a>
<ul class="fab-menu-inner">
<li>
<div data-fab-label="Compose email">
<a href="#" class="btn btn-light btn-icon rounded-pill">
<i class="ph-pencil m-1"></i>
</a>
</div>
</li>
<li>
<div data-fab-label="Conversations">
<a href="#" class="btn btn-light btn-icon rounded-pill">
<i class="ph-chats m-1"></i>
</a>
<span class="badge bg-success position-absolute start-100 top-0 translate-middle rounded-pill">5</span>
</div>
</li>
</ul>
</div>
<!-- /clickable menu -->
Basic examples
Demo of buttons and button listsSingle floating button
Floating button uses our regular button markup with .fab-menu-btn class wrapped in .fab-menu container
Open menu on hover
Sub menu can be opened on hover. To show menu on hover, add data-fat-boggle="hover" in .fab-menu container
Open menu on click
Most common use case is to show menu on click. Use data-fat-boggle="click" in .fab-menu container
FAB menu elements
Buttons, dropdown menus and imagesSimple buttons
Sub menu usually contains regular rounded buttons with single icon. You can use any button style in the list
Button with dropdowns
Buttons also support left and right dropdowns. Use dropstart/dropend classes for correct placement
Button with images
You can also use images instead of icons inside buttons. Some adjustments may be required for better look
Inner button elements
Badges, labels, color marks and status indicatorsBadges with number
Buttons can container labels and badges in any style. Use a set of utility classes to position them properly
Badge mark
If you prefer to show a simple colored indicator, usage of utility classes is exactly the same as with badges
Status indicators
Our simple status indicator component is also supported, when buttons contain images instead of icons
Inner button labels
Display tooltips on left/right sides in 2 colorsVisible labels
Use .fab-label-visible class in parent container to make tooltips always visible when the list is expanded
Light labels
All button types support light and dark tooltips displayed on hover. In dark theme all colors are inverted
Label positions
Button tooltips also support left or right placement. Left is default, use .fab-label-end to display it on the right
Default button colors
Examples of pre-defined contextual colorsDefault button color
We are using light as our default button style. Make sure .fab-menu-btn class is always included as well
Success button color
Success contextual color alternative using .btn-success class. Outline and flat styles are also supported
Primary button color
Primary contextual color alternative using .btn-primary class. Outline and flat styles are also supported
Warning button color
Warning contextual color alternative using .btn-warning class. Outline and flat styles are also supported
Danger button color
Danger contextual color alternative using .btn-danger class. Outline and flat styles are also supported
Info button color
Info contextual color alternative using .btn-info class. Outline and flat styles are also supported
Custom color options
Use custom color in main and inner buttonsCustom main button color
Use optional button color classes to apply secondary colors to the main button. All styles are supported
Custom inner button color
You can also use any button color classes in the button list inside .fab-menu-inner submenu container
Mixing button colors
Feel free to also mix button colors and styles, submenu supports unlimited number of buttons in the list
FAB menu classes
| Class | Description |
|---|---|
| Basic classes | |
.fab-menu |
Default menu class name, added to <ul> element |
.fab-menu-inner |
Container class for inner menu list, added to inner <ul> element |
.fab-icon-open |
Icon visible by default, hidden when menu opened |
.fab-icon-close |
Icon that appears when menu is opened, hidden when menu closed |
| Positions and directions | |
.fab-menu-top |
Static button, menu opens below the button |
.fab-menu-bottom |
Static button, menu opens above the button |
| 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 |
| 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-end |
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 |
