Navigation Bar
Furatto provides a beautiful and extendable top navigation bar. It collapses on mobile views, providing a sliding down kind menu.
Building the markup
The navigation bar is a bit complex piece of HTML, but full with goodies. It has support for many elements such as buttons, links, and even dropdown menus for you to play around. It is highgly customizable, and we will add more features to it in the near future.
<nav class="navigation-bar">
<ul class="brand-section">
<li class="brand-name">
<a href="/" class="menu-trigger" id="trigger">Furatto</a>
</li>
<li class="menu-toggle">
<a href="#">Menu</a>
</li>
</ul>
<ul class="pull-right">
<li class="divider"></li>
<li><a href="#">Add-ons</a></li>
<li class="divider"></li>
<li><a href="/docs">Docs</a></li>
<li class="divider"></li>
<li><a href="#" class="button three-d">Get Started <i class="fa fa-chevron-circle-right"></i></a></li>
</ul>
</nav>
Navigation bar position
The navigation bar is build with a nav or ul element. It will cover the full browser width. By default it will stick on the top of the browser, and by just appending the fixed class name to the navigation-bar it follow as you scroll down.
Fixed navigation
For fixed top navbar you just need to add a padding-top to the body which should be equal or bigger thant the height of your navigation bar element. The default value of the navigation bar is 45px.
<nav class="navigation-bar fixed">
</nav>
Navigation bar components
We know adding more than just links to the navigation bar is important, that's why we added support to add different elements on it, such as buttons, dividers and much more...
Links
Adding links to the navbar is fairly easy, you just have to wrap them inside a ul element and you're good to go.
<nav class="navigation-bar">
<ul class="pull-right">
<li><a href="#">Add-ons</a></li>
<li><a href="/docs">Docs</a></li>
</ul>
</nav>
Dividers
To add dividers between links or elements on a ul element, just add a divider to a list element.
<nav class="navigation-bar">
<ul class="pull-right">
<li class="divider"></li>
<li><a href="#">Add-ons</a></li>
<li class="divider"></li>
<li><a href="/docs">Docs</a></li>
</ul>
</nav>
Buttons
You can add buttons to the navigation bar by just adding the button class name to the anchor element. You can also add the class modifiers that Furatto offers by default.
<nav class="navigation-bar">
<ul class="pull-right">
<li class="divider"></li>
<li><a href="#">Add-ons</a></li>
<li class="divider"></li>
<li><a href="/docs">Docs</a></li>
<li class="divider"></li>
<li><a href="/docs" class="button three-d">Get Started <i class="fa fa-chevron-circle-right"></i></a></li>
</ul>
</nav>
Search bar
To add a search bar to the navigation bar, is fairly easy, just add a .with-form class name to a list item and inside it add the form, just as shown below:
<ul>
<li class="with-form">
<form action="" method="get" accept-charset="utf-8">
<input type="search" name="" id="" value="" />
<input type="submit" name="" id="" value="Search" class="button pill" />
</form>
</li>
</ul>
Dropdowns
It is very easy to group menu items into dropdown menus on the navbar. You just need to add the with-dropdown class to a list item, and inside of it add another ul element.
<nav class="navigation-bar">
<ul>
<li class="with-dropdown">
<a href="#">Settings <i class="icon-arrow-down"></i></a>
<ul class="dropdown">
<li class="dropdown-header">A header</li>
<li><a href="#">Abraham Kuri Vargas</a></li>
<li><a href="#">A really long text to test the dropdown</a></li>
<li><a href="#" class="btn btn-success">Edit profile</a></li>
<li><a href="#" class="btn btn-danger">Edit profile</a></li>
<li class="divider"></li>
<li><a href="#">Sign out</a></li>
</ul>
</li>
</ul>
</nav>
Extra support
We don't currently support forms on the navbar, or on the dropdowns, but we will, wait for them. For updates follow us at @furattoicalia.
Available sass variables
It is very common to change the default values for the navigation bar, you can achieve almost everything you want on it by just changing the our sass variables.
//Navigation general settings
$navigation-bar-height: 45px !default;
$navigation-bar-background: #191818 !default;
$navigation-margin-bottom: 10px !default;
$navigation-bar-color: #FFF !default;
$navigation-bar-font-weight: 300 !default;
$navigation-font-size: px-to-rems(13) !default;
$navigation-fixed-z-index: 1030 !default;
$navigation-bar-border-bottom: transparent !default;
//Brand section
$navigation-bar-brand-section-font-size: px-to-rems(18) !default;
$navigation-bar-brand-section-font-weight: 400 !default;
//Navigation links settings
$navigation-bar-link-color: #FFF !default;
$navigation-bar-link-hover-color: #999 !default;
$navigation-bar-link-hover-decoration: none !default;
//Buttons settings
$navigation-bar-button-font-size: $navigation-font-size !default;
$navigation-bar-button-height: 35px !default;
$navigation-bar-button-margin-left: px-to-rems(8) !default;
$navigation-bar-button-margin-right: px-to-rems(8) !default;
$navigation-bar-menu-color: #FFF !default;
//Icons settings
$navigation-bar-icon-margin-right: 5px !default;
//Text settings
$navigation-bar-text-color: #CCC !default;
//Active items
$navigation-bar-active-color: #FFF !default;
$navigation-bar-active-hover-color: darken($navigation-bar-active-color, 5%) !default;
//Menu toggle
$navigation-bar-menu-toggle-text-transform: uppercase !default;
//Dropdown
$navigation-bar-arrow-color: $navigation-bar-link-color !default;
$navigation-bar-arrow-hover-color: $navigation-bar-link-hover-color !default;
$navigation-bar-dropdown-z-index: $navigation-fixed-z-index + 10 !default;
$navigation-bar-dropdown-header-text-transform: uppercase !default;
$navigation-bar-dropdown-header-padding: px-to-rems(9) px-to-rems(17) px-to-rems(2) !default;
$navigation-bar-dropdown-header-color: #777 !default;
$navigation-bar-dropdown-header-font-weight: bold !default;
$navigation-bar-dropdown-header-font-size: px-to-rems(8) !default;
$navigation-bar-dropdown-divider-height: px-to-rems(1) !default;
$navigation-bar-dropdown-anchor-height: 45px !default;
$navigation-bar-dropdown-anchor-line-height: $navigation-bar-dropdown-anchor-height !default;
$navigation-bar-dropdown-right-position: 0px !default;
//Media
$media-collapse-width: 768px !default;
$navigation-bar-collapse-query: "#{$media-display} and (max-width: #{$media-collapse-width})" !default;
$navigation-bar-uncollapse-query: "#{$media-display} and (min-width: #{$media-collapse-width})" !default;
Using the javascript
Using navigation bar plugin
Just add the furatto.navigation-bar.js file or the furatto.js
An example is provided below:
<script type="text/javascript" charset="utf-8" src="../dist/js/furatto.min.js"></script>