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.
Basic
You can create an Icon Bar using minimal markup. Specifying the number of items one-up through eight-up will ensure the items are evenly spaced.
HTML
<div class="icon-bar five-up">
<a class="item">
<img src="../assets/img/images/fi-home.svg" >
<label>Home</label>
</a>
<a class="item">
<img src="../assets/img/images/fi-bookmark.svg" >
<label>Bookmark</label>
</a>
<a class="item">
<img src="../assets/img/images/fi-info.svg" >
<label>Info</label>
</a>
<a class="item">
<img src="../assets/img/images/fi-mail.svg" >
<label>Mail</label>
</a>
<a class="item">
<img src="../assets/img/images/fi-like.svg" >
<label>Like</label>
</a>
</div>Rendered HTML
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
<div class="icon-bar vertical five-up">
<a class="item">
<img src="../assets/img/images/fi-home.svg" >
<label>Home</label>
</a>
<a class="item">
<img src="../assets/img/images/fi-bookmark.svg" >
<label>Bookmark</label>
</a>
<a class="item">
<img src="../assets/img/images/fi-info.svg" >
<label>Info</label>
</a>
<a class="item">
<img src="../assets/img/images/fi-mail.svg" >
<label>Mail</label>
</a>
<a class="item">
<img src="../assets/img/images/fi-like.svg" >
<label>Like</label>
</a>
</div>
<div class="icon-bar large-vertical four-up">
<a class="item">
<img src="../assets/img/images/fi-home.svg" >
<label>Home</label>
</a>
<a class="item">
<img src="../assets/img/images/fi-bookmark.svg" >
<label>Bookmark</label>
</a>
<a class="item">
<img src="../assets/img/images/fi-info.svg" >
<label>Info</label>
</a>
<a class="item">
<img src="../assets/img/images/fi-mail.svg" >
<label>Mail</label>
</a>
</div>Rendered HTML
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
<div class="icon-bar five-up">
<a class="item">
<i class="fi-home"></i>
</a>
<a class="item">
<i class="fi-bookmark"></i>
</a>
<a class="item">
<i class="fi-info"></i>
</a>
<a class="item">
<i class="fi-mail"></i>
</a>
<a class="item">
<i class="fi-like"></i>
</a>
</div>Rendered HTML
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.
Add the class .disabled to an icon bar .item to give it a faded appearance and disable hover effects.
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
HTML
<div class="icon-bar five-up" role="navigation">
<a class="item" role="button" tabindex="0" aria-label="home">
<i class="fi-home"></i>
</a>
<a class="item" role="button" tabindex="0" aria-label="Bookmark">
<i class="fi-bookmark"></i>
</a>
<a class="item" role="button" tabindex="0" aria-label="Information">
<i class="fi-info"></i>
</a>
<a class="item" role="button" tabindex="0" aria-label="Mail">
<i class="fi-mail"></i>
</a>
<a class="item" role="button" tabindex="0" aria-label="Like">
<i class="fi-like"></i>
</a>
</div>Rendered HTML - Icon Bar with Text
HTML
<div class="icon-bar five-up" role="navigation">
<a class="item" aria-labelledby="#itemlabel1">
<img src="../assets/img/images/fi-home.svg" >
<label id='itemlabel1'>Home</label>
</a>
<a class="item" aria-labelledby="#itemlabel2">
<img src="../assets/img/images/fi-bookmark.svg" >
<label id='itemlabel2'>Bookmark</label>
</a>
<a class="item" aria-labelledby="#itemlabel3">
<img src="../assets/img/images/fi-info.svg" >
<label id='itemlabel3'>Info</label>
</a>
<a class="item" aria-labelledby="#itemlabel4">
<img src="../assets/img/images/fi-mail.svg" >
<label id='itemlabel4'>Mail</label>
</a>
<a class="item" aria-labelledby="#itemlabel5">
<img src="../assets/img/images/fi-like.svg" >
<label id='itemlabel5'>Like</label>
</a>
</div>Customize with Sass
Icon Bar can be easily customized using our provided Sass variables.
SCSS
$include-html-icon-bar-classes: $include-html-classes
// We use these to style the icon-bar and items
$icon-bar-bg: $oil;
$icon-bar-font-color: $white;
$icon-bar-font-color-hover: $icon-bar-font-color;
$icon-bar-font-size: 1rem;
$icon-bar-hover-color: $primary-color;
$icon-bar-icon-color: $white;
$icon-bar-icon-color-hover: $icon-bar-icon-color;
$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;
$icon-bar-disabled-opacity: 0.7Semantic Markup with Sass
Basic
You can use the icon-bar() mixin to create your own icon-bar, like so:
.my-custom-class {
@include icon-bar();
}<div class="my-custom-class"> </div>Advanced
You can further customize your icon bar using the provided options in the icon bar mixin:
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,
// Allow disabled icons. Default: false.
// If enabled add class disabled.
$disabled: false
);
}HTML
<div class="my-custom-class five-up">Items for the Icon Bar goes here.</div>Sass Errors?
If the default "foundation" import was commented out, then make sure you import this file:
SCSS
@import "foundation/components/icon-bar";