• Use unique icons to help your navigation items standout
  • Set the width of your navigation bar when it is fully extended
  • Choose to include dividers between your navigation items
  • Include a drop zone for other non-navigation related content as well
  • Add a logo and / or site title
  • Use a variety of color pickers to style your navigation
  • Set the alignment of the navigation items and site title
  • Allows navigation items to scroll if they extend outside the area of the screen or device display area


We’ve built a separate example page that includes the Side Nav stack for you to see how it works, so that it won’t get cluttered up with the other navigation already in use on the Documentation page.

Using Side Nav


Title Section
You may opt to include a title section in your Side Nav stack. Doing so allows you to enter text to serve as your site title. This feature must be enabled for your site logo (configured below) to be seen as well.

Title Alignment
Choose how you wish for your site title within the Side Nav stack to be aligned when the navigation is open.

When the Title Section feature is enabled you may add a Logo to your Side Nav which will appear to the right of the Title. This Logo will be seen even when the Side Nav is closed.

  • Please Note: Your logo image file needs to be in a square shape.

Nav Width
Allows you to set the width of the Side Nav when it is fully opened.


Four color pickers that let you style the way the navigation bar is styled. You can set the color of the navigation bar background, its text, the icons and the icons’ backgrounds.

Bar Hover
Set the colors of the various navigation bar elements when they are hovered over.

Bar Active
Set the colors of the various navigation bar elements when they are the active element.

Include Dividers
Enable this feature to include thin divider lines between the navigation items. You can also choose the color of these divider lines using a color picker, when the dividers are enabled.

Icon Size
Set the size of the icons within the navigation items.

Icon Bkg Corners
Set the roundness of the corners of the icon backgrounds. This is visible when the icons have background colors applied to them.

Include Drop Shadow
Enabling this feature allows you to add a drop shadow to the Side Nav to separate it from the page a little bit.


Set the alignment of the text within the navigation items. You can choose from a left, center or right alignment.


Include Content Drop Zone
Allows you to enable a drop zone within the stack that lets you add other stacks to the Side Nav below the navigation items. This content is only seen then the navigation bar is fully extended.

Child Stacks

Nav Item

This is the text that will be displayed as your navigation item within the stack.

Add either an internal link to another page on your site or an external link to an outside web address to your navigation item.

Allows you to mark a Nav Item as being the current active navigation link.

Allows you to choose form over 300 different icons for your Nav Item.

Custom Colors
Allows you to customize the colors for this particular Nav Item.


You may opt to insert a spacer item between elements in your Side Nav. The Spacer child stack as no settings.

Sign up for The Forge newsletter

Stay up to date on future versions of Foundry, as well as important news, updates and more!

This site is built using Foundry for RapidWeaver

© 2006-2018 Elixir Graphics | Contact Us