Icon Bar
An Icon Bar provides a menu to quickly navigate an app. Use the Icon Bar horizontally or vertically, with the labels below the icons or to the right. Have it your way.
You can create an Icon Bar using minimal markup. Specifying the number of items one-up
through
six-up
will ensure the items are evenly spaced.
Other Options
The default orientation for the labels are on the bottom of the icons. By adding a class of
.label-right
to the Icon Bar, you have the label on the right and the icon on the left.
Overriding Icon Colors
If you absolutely want to, we support overriding the icon color and labels in addition to changing the theme of the icon bar. Please use this sparingly.
View HTML
<div class="icon-bar five-up white">
<a class="item alt">
<i class="icon-location"></i>
<label>Location</label>
</a>
<a class="item play5">
<i class="icon-basket"></i>
<label>Cart</label>
</a>
<a class="item play1">
<i class="icon-email"></i>
<label>Email</label>
</a>
<a class="item playbar">
<i class="icon-contact"></i>
<label>Profile</label>
</a>
<a class="item connect">
<i class="icon-cog"></i>
<label>Settings</label>
</a>
</div>