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 -->
									<ul class="fab-menu" data-fab-toggle="click">
										<li>
											<a class="fab-menu-btn btn btn-primary btn-float rounded-pill btn-icon">
												<i class="fab-icon-open icon-plus3"></i>
												<i class="fab-icon-close icon-cross2"></i>
											</a>

											<ul class="fab-menu-inner">
												<li>
													<div data-fab-label="Compose email">
														<a href="#" class="btn btn-light rounded-pill btn-icon btn-float">
															<i class="icon-pencil"></i>
														</a>
													</div>
												</li>
												<li>
													<div data-fab-label="Conversations">
														<a href="#" class="btn btn-light rounded-pill btn-icon btn-float">
															<i class="icon-bubbles3"></i>
														</a>
														<span class="badge badge-primary">5</span>
													</div>
												</li>
											</ul>
										</li>
									</ul>
									<!-- /clickable menu -->