---
title: Icon Bar
---
***
{{> 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. For an Icon bar that's horizontal on small screens but vertical on larger use '.medium-vertical' and 'large-vertical' to utilize those breakpoints.
HTML
{{> examples_icon_bar_vert}}
Rendered HTML
{{> examples_icon_bar_vert_rendered}}
***
### Advanced
Instead of images you can use Icon Fonts. This will help you change the colors and size faster instead of having to upload new images each time. Check out our badass Icon Fonts here.
HTML
{{> examples_icon_bar_iconfont}}
Rendered HTML
{{> examples_icon_bar_iconfont_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.
***
## Accessibility
To make the icon bar navigable with a keyboard, add the attribute `tabindex="0"` to each `item`, which allows it to be focused when tabbing through items. Each item also gets the attribute `role="button"`, indicating its functionality.
For icon bars without text labels, add `aria-label` to each item, with a value representing what the icon is. For icon bars with labels, give each label a unique ID, and add `aria-labelledby` to each item container, with a value equal to the ID of the label.
Rendered HTML - Icon Bar w/o Text
{{> examples_icon_bar_iconfont_aria_rendered}}
HTML
{{> examples_icon_bar_iconfont_aria}}
Rendered HTML - Icon Bar with Text
{{> examples_icon_bar_text_aria_rendered}}
HTML
{{> examples_icon_bar_text_aria}}
***
## Customize with Sass
Icon Bar can be easily customized using our provided Sass variables.
SCSS
{{#markdown}}
```scss
$include-html-icon-bar-classes: $include-html-classes
// We use these to style the icon-bar and items
$icon-bar-bg: $oil !default;
$icon-bar-font-color: $white !default;
$icon-bar-font-size: 1rem !default;
$icon-bar-hover-color: $primary-color !default;
$icon-bar-icon-color: $white !default;
$icon-bar-icon-size: 1.875rem !default;
$icon-bar-image-width: 1.875rem !default;
$icon-bar-image-height: 1.875rem !default;
$icon-bar-active-color: $primary-color !default;
$icon-bar-item-padding: 1.25rem !default;
```
{{/markdown}}
***
## Semantic Markup with Sass
### Basic
You can use the `icon-bar()` mixin to create your own icon-bar, like so:
{{#markdown}}
```scss
.my-custom-class {
@include icon-bar();
}
```
{{/markdown}}
{{#markdown}}
```html
```
{{/markdown}}
### Advanced
You can further customize your icon bar using the provided options in the `icon bar` mixin:
#### SCSS
{{#markdown}}
```scss
.my-custom-class {
@include icon-bar(
// Set the background color of the icon bar. Default: $icon-bar-bg.
$bar-bg: $icon-bar-bg,
// Set the font color of the icon bar. Default: $icon-bar-font-color.
$bar-font-color: $icon-bar-font-color,
// Set the hover background color for the icon bar. Default: $icon-bar-hover-color.
$bar-hover-color,
// Set the color of the icons for the icon bar. Default: $icon-bar-icon-color
$bar-icon-color: $icon-bar-icon-color,
// Set the background of the color when the icon bar is clicked or tapped on (or items within the icon bar). Default: $icon-bar-active-color.
$bar-active-color,
// Set the padding for icon bar. Default: $icon-bar-item-padding.
$padding,
// Set the font-size of the icon bar. Default: $icon-bar-font-size.
$font-size,
// Set the size of the icons within the icon bar. Default: $icon-bar-icon-size.
$icon-size,
// Set the width of images within the icon bar. Default: $icon-bar-image-width
$image-width,
// Set the height of images within the icon bar. Default: $icon-bar-image-height
$image-height,
// Assign whether or not base styles usually associated with the icon bar to appear the way it usually does should be included. Default: true.
$base-style: true
);
}
```
{{/markdown}}
#### HTML
```html
Items for the Icon Bar goes here.
```
##### Sass Errors?
If the default "foundation" import was commented out, then make sure you import this file:
SCSS
```scss
@import "foundation/components/icon-bar";
```