Features

  • Create easy to use vertical navigation for your pages
  • Create collapsable sections or simple linked items
  • Style it to match your site using a wide array of color pickers

Example

The vertical navigation bar to the right-hand side of this page (at the bottom on mobile devices) that allows you to navigate through the various sections of the Foundry Documentation pages is built using the Vertical Nav stack.


Using Vertical Nav

Sections

Section Title Size
Set the font size for the titles of collapsable sections within the Vertical Nav stack.

Styling

Border
Use color pickers to set the Outer border color as well as the Inner Divider lines.

Arrow
Choose the color of the indicator arrow for collapsable sections. You can set a different color for the arrow depending on which level within the navigation it is located.

Arrow (Open)
Choose the color of the indicator arrow for collapsable sections that have been expanded, or opened. You can set the a different color for the arrow depending on which level within the navigation it is located.

Background
Choose your background colors for the Vertical Nav stack’s navigation items at each of the three levels.

Background (Hover)
Choose your background colors for the Vertical Nav stack’s navigation items when hovered over at each of the three levels.

Text
Use color pickers to style the text of your navigation items at each of the three levels.

Text (Hover)
Use color pickers to style the text of your navigation items when they are hovered over at each of the three levels.

Active Indicator
Set the color you wish item(s) to be marked with when they are designated as active.

Arrows

Arrow Alignment
Choose whether you’d like the arrow indicators to be located on either the left- or right-hand side of the navigation items.

Child Stacks

Section

The Section child stack allows you to create a grouping of navigation items that is collapsable. If a Section contains a navigation item that is marked as active, that section will begin open when the page loads.

Section Name
Sets the top level label of the section. This is the title of the grouping that will be clicked on to expand the navigation items.

Collapse Nav. Items
Allows you to collapse the navigation items in Edit Mode to make room and tidy things up when you’re not working on a specific section.

Nav Item

The Nav Item child stack within the Section child stack allows you to add navigation items to Section stacks within the Vertical Navigation.

Title
Sets label of the link that will be added as a navigation item.

Link
Provide a link to a URL, whether it be an internal page or an external link.

Override Colors
Enable to choose to override the main Vertical Nav stack’s styling settings for this particular navigation item.

Mark as Active
Enable to indicate that this is the active navigation item.

Icon
You can choose from over 300 different icons to add to you navigation item.

Link

The link child stack allows you to insert a navigation item that does not have child items. When clicked it will take you to the link you define in the Link child stack settings.

Title
Sets label of the link that will be added as a navigation item.

Link
Provide a link to a URL, whether it be an internal page or an external link.

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