--- title: 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.

*** {{> examples_icon_bar_rendered}} ***

Basic

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.

HTML

{{> examples_icon_bar}}

Rendered HTML

{{> examples_icon_bar_rendered}}
***

Vertical Icon Bar

It's easy. Just add a class of `.vertical` to make the Icon Bar stack up.

HTML

{{> examples_icon_bar_vert}}

Rendered HTML

{{> examples_icon_bar_vert_rendered}}
*** ### Other Options The default orientation for the labels are on the bottom. By adding a class of `.label-right` you can have the label on the right and icon on the left. *** ## Customize With Sass Icon Bar can be easily customized using our provided Sass variables.

SCSS

{{#markdown}} ```scss // We use these to style the icon-bar and items $icon-bar-bg: #333 $icon-bar-font-color: #fff $icon-bar-font-size: 1rem $icon-bar-hover-color: $primary-color $icon-bar-icon-color: #fff $icon-bar-icon-size: 1.875rem $icon-bar-image-width: 1.875rem $icon-bar-image-height: 1.875rem $icon-bar-active-color: $primary-color $icon-bar-item-padding: 1.25rem ``` {{/markdown}}
##### Sass Errors? If the default "foundation" import was commented out, then make sure you import this file:

SCSS

```scss @import "foundation/components/icon-bar"; ```