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.

Vertical Icon Bar

You can make the Icon Bar stack up by adding the .vertical class.

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>