Icon Bar

Base Foundry stack

Use stunning icons to create a responsive, icon-based navigation that allows your visitors to traverse your site with ease.

  • Set icon sizes at each breakpoint
  • Include labels for the Tablet and Desktop breakpoints
  • Set label font size at Tablet and Desktop breakpoints
  • Navigation bar height changes based on icon and label sizes
  • Navigation items widths adjust based on number of items
  • Over 300 icons to choose from
  • Built-in sticky navigation feature
  • Drag-and-drop icons to easily rearrange your navigation items
  • Customize colors
  • Use rounded or squared off corners
  • Include tooltips for individual icons
  • Please Note: Features on this page marked with the purple moon icon are compatible with Foundry's Dark Mode.

Example

Using Icon Bar

Icon Size

Mobile, Tablet & Desktop
Set a different size for your icons at each of the three different breakpoints.

Labels

Labels
Choose whether to show or hide the labels for the icons in your Icon Bar.

Font v2
Allows you to choose to use the Base Font assigned in the Foundry Control Center or to assign a Typeface based font to your Icon Labels.

Font Weight v2
Use this setting to adjust the font weight of your Icon Labels when you've assigned them a Typeface font. If you're using the Control Center's Base Font instead of a Typeface font your font weight will be set to match the Base Font's settings.

Hide Labels On...
Choose when to begin hiding the labels. The labels will always be hidden at the mobile breakpoint to conserve space and make for a clean display. You can opt to have them also be hidden at the Tablet breakpoint.

Tablet & Desktop
Set the font size for your labels at both the Tablet and Desktop breakpoints. No Mobile breakpoint option is provided as the labels are always hidden at the Mobile breakpoint.

Style

Background
Set the color of the Icon Bar background to match your site. Use one of Foundry’s color swatch presets or make use of custom color pickers to style the title bar.

Icon
Choose the colors for the icons themselves and the background when an icon is hovered over.

Label
Define what color you wish your label text to be.

Sticky Navigation

Sticky Navigation
Enabling this feature allows the icon bar to affix itself to the top of the browser window. This occurs when the visitor has scrolled far enough for the icon bar to reach the top of the browser.

Child Stack

Icon Bar Item

Icons are added to the Icon Bar by clicking the small blue plus sign at the bottom of the stack. Doing so adds an Icon Bar Item child stack to the Icon Bar. Each of these child stacks has its own individual settings as well:

Link
Choose where you want the visitor to be taken when they click on a specific icon within the Icon Bar. You can set the link to be an internal page or an external site elsewhere on the web.

Icon
Choose which icon you wish to have each link represented by. Each of the Icon Bar Item child stacks can have a different icon. There are over 300 different icons to choose from.

Label
Set the label for your icon on each individual child stack.

Tooltip
Add a popup tooltip to your icon. These can be enabled on a per-icon basis. You can then set the tooltip text and its location, which can be set to either bottom, or top.

  • Please Note: For Tooltips to work you must enable Tooltips in the Theme Vairations within the Foundry theme's settings!
Insight
Simple navigation

The Icon Bar stack's sleek, simple design lends it to being a great little, manually curated, navigation bar for your site.

Its many styling features and its ability to use Foundry's brand color presets makes for a simple menu solution.