Inline navigation
Furatto comes with this helpful navigation, perfect for a sub-menu, or to act like a set of tabs.
Building the markup
We use the .navigation css rule to get a simple navigation, and by appending the inline class you get the beautiful inline menu shown below.
<ul class="navigation inline">
<li class="header">A header</li>
<li class="active"><a href="#">A link</a></li>
<li><a href="#">A link</a></li>
<li><a href="#">A link</a></li>
</ul>
Navigation active state
To activate the active state on a ist item, just add the active class name to the list item. Duh!
<ul class="navigation inline">
<li class="header">A header</li>
<li class="active"><a href="#">A link</a></li>
<li><a href="#">A link</a></li>
<li><a href="#">A link</a></li>
</ul>
Available sass variables
Customize our sass variables to meet your needs.
//Navigation variations
$navigation-inline-margin-bottom: 0.55rem !default;
$navigation-inline-active-background: #1abc9c !default;
$navigation-inline-active-radius: 0.14285714rem !default;
$navigation-inline-active-color: #FFF !default;
$navigation-inline-active-padding: 0.21428571rem !default;
$navigation-inline-link-color: #999 !default;
$navigation-inline-link-hover: #08C !default;
A thought on tabs
Inline navigation is ideal for tabs usage, check the tabs section