star Bemat Admin Exclusive Premium Plugin

The Speed Dial component inspired by Google Inbox allows for a small number of items to animate out from a floating action button (FAB). The floating action button can fling out related actions upon press.

FAB Speed Dial

You may supply a direction of left, up, down or right through the data-direction attribute, and an animation mode of fling or scale through the data-mode attribute.

Examples:

Direction

Open/Closed

Animation Modes

HTML Code:

<div class="md-fab-speed-dial" data-toggle="speed-dial" data-mode="fling">
	<div class="md-fab-trigger" aria-expanded="false" aria-haspopup="true">
		<button type="button" class="btn btn-floating-action btn-info"><i class="material-icons">menu</i></button>
	</div>
	
	<ul class="md-fab-actions" aria-hidden="true">
		<li><a href="#" class="btn btn-default-bright btn-floating-action btn-sm"data-toggle="tooltip" data-placement="left" title="Tooltip here"><i class="material-icons">3d_rotation</i></a></li>
		<li><a href="#" class="btn btn-default-bright btn-floating-action btn-sm"><i class="material-icons">attach_file</i></a></li>
		<li><a href="#" class="btn btn-default-bright btn-floating-action btn-sm"><i class="material-icons">backup</i></a></li>
		<li><a href="#" class="btn btn-default-bright btn-floating-action btn-sm"><i class="material-icons">brush</i></a></li>
		<li><a href="#" class="btn btn-default-bright btn-floating-action btn-sm"><i class="material-icons">pageview</i></a></li>
		<li><a href="#" class="btn btn-default-bright btn-floating-action btn-sm"><i class="material-icons">send</i></a></li>
	</ul>
</div>