Vertical Nav
Create manually curated, collapsable and easily navigable, vertical navigation systems for your pages.
- 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
- Style navigation differently for Dark Mode visitors
Example
Using Vertical Nav
General
Dark Mode
When enabled you'll be given additional options throughout the Vertical Nav stack's settings that allow you to customize the styling for visitors who have Dark Mode enabled in their computer's OS or browser.
- Please Note: Features marked with the purple moon icon will include color picker(s) for Dark Mode when Dark Mode is enabled.
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.
Custom Rounded Corners
Allows you to set the border radius of the Vertical Navigation stack to a custom value. If disabled the Foundry Control Center’s rounding values will be applied.
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.
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.
Versatile
The Vertical Navigation stack makes for a wonderful, easy-to-use, manually curated menu. We use it right here on this page for the left-hand navigation even! Give it a try, if you haven't already.