Features

  • 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

Example

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

General

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.

Logo
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.

Styling

Bar
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.

Text

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

Content

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

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

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

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

Icon
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.

Spacer

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-2016 Elixir Graphics | Contact Us