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 bg-blue btn-float rounded-round 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-round 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-round btn-icon btn-float">
						<i class="icon-bubbles3"></i>
					</a>
					<span class="badge bg-primary-400">5</span>
				</div>
			</li>
		</ul>
	</li>
</ul>
<!-- /clickable menu -->