#### Extra - FAB Menu

Statistics Invoices Schedule

##### 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 -->
    <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 -->

###### Basic examples

Default FAB menu usage

###### Single floating button

Single clickable button without menu

###### Open menu on hover

Example of hoverable FAB menu

###### Open menu on click

Example of clickable FAB menu

###### FAB menu elements

Buttons, dropdowns and images

###### Simple buttons

Rounded buttons with icons

###### Button with dropdowns

Buttons with left/right dropdowns

###### Button with images

Display thumbs instead of buttons

###### Inner button elements

Badges, labels and status marks

###### Badges with number

Badge elements on top right corner

###### Badge mark

Rounded badge mark sign

###### Circle badge mark

Circle mark on top right corner

###### Inner button labels

Display tooltips on left/right sides

###### Label positions

Left and right label positions

###### Dark labels

Change label color from light to dark

###### Visible labels

Always display button labels

###### Default button colors

Pre-defined contextual colors

###### Default button color

Default color using `.btn-secondary` class

###### Success button color

Success color using `.btn-success` class

###### Primary button color

Primary color using `.btn-primary` class

###### Warning button color

Warning color using `.btn-warning` class

###### Danger button color

Danger color using `.btn-danger` class

###### Info button color

Info color using `.btn-info` class

###### Custom color options

Use custom color in main and inner buttons

###### Custom main button color

Use color helper classes for custom colors

###### Custom inner button color

Use color helper classes for custom colors

###### Mixing button colors

Feel free to mix all button colors

##### FAB menu classes

FAB menu styling is fully controlled by CSS. you can apply different color and button styling options directly in markup. Direction and display options are also can be changed on the fly just by replacing data attributes or class names in main container. Please note: clickable menu requires `material.min.js` file. Table below demonstrates all available classes that can be used with the FAB menu:

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
`.fab-menu-top-left` | Top left position. Can have absolute and fixed positions, also can be sticked to top on page scroll
`.fab-menu-top-right` | Top right position. Can have absolute and fixed positions, also can be sticked to top on page scroll
`.fab-menu-bottom-left` | Bottom left position. Can have absolute and fixed positions
`.fab-menu-bottom-right` | Bottom right position. Can have absolute and fixed positions
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-right` | Display labels on the right side. Default position is left. Must be added to `<div>` element inside inner menu item
`.fab-label-dark` | Use this class if you want to display dark labels instead of default light. 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