Toolbars

Furatto lets you build tooltip style toolbars for group navigation icon items.

---

---

Building the markup

The toolbar navigation html is a bit long, but the result as you saw it is amazing!. It is composes by an anchor element, and a div element which contains the toolbar elements.

  
  <a href="javascript:void(0)" class="button" data-furatto="toolbar" data-content="#user-toolbar-options-right">
    <i class="fa fa-cog"></i>
  </a>
  <div id="user-toolbar-options-right" style="display:none">
    <a href="#"><i class="fa fa-user"></i></a>
    <a href="#"><i class="fa fa-star"></i></a>
    <a href="#"><i class="fa fa-edit"></i></a>
    <a href="#"><i class="fa fa-trash-o"></i></a>
    <a href="#"><i class="fa fa-map-marker"></i></a>
  </div>
  

A toolbar story

The default position for a toolbar is on the top, but you can easily customize it via data attributes, keep reading...

---

Usage

Via data attributes

Add the data-furatto="toolbar" data attribute to a link element. The you have to add a data-content="#idToDiv" attribute pointing to the div element id, for the toolbar plugin to pick up the right anchors.

  
  <a href="javascript:void(0)" class="button" data-furatto="toolbar" data-content="#user-toolbar-options-right">
    <i class="fa fa-cog"></i>
  </a>
  

Name	Type	Default	Description
position	string	top	Sets the position for the toolbar. You can use top, bottom,left and right
content	string	NULL	Id of the links container to display on the toolbar, it must have the # symbol next to the id name, as in #idOfToolbarContent.
theme	string	NULL	Sets the theme for the toolbar. You can use primary, danger and warning.

---

Available sass variables

You can always customize the toolbars styling by overwriting our sass variables.

  
$toolbar-background-color: #232323 !default;
$toolbar-border-radius: 0px !default;
$toolbar-item-height: 34px !default;
$toolbar-item-line-height: $toolbar-item-height !default;
$toolbar-item-width: 44px !default;
$toolbar-item-color: #FFF !default;
$toolbar-arrow-border-width: 7px !default;


//Toolbar variations
$include-toolbar-variations: false !default;
$toolbar-primary-background-color: #3498db !default;
$toolbar-danger-background-color: #e74c3c !default;
$toolbar-warning-background-color: #f39c12 !default;

//Toolbar positions
$include-toolbar-top-position: true !default;
$include-toolbar-bottom-position: true !default;
$include-toolbar-left-position: true !default;
$include-toolbar-right-position: true !default;
  

You can always check out the source for the JS toolbar plugin for further customization.