This module allows you to display a vertical navigation menu that can show different levels of the navigation tree. It is possible to find the Vertical Navigation Module in the Basic Modules menu, add it to your website by dragging it from the top bar to a row or column of your preference.
Edit the Vertical Navigation Module
To open the editing menu, double-click on top of the module you wish to modify or hover the mouse on top of it to find the blue Module menu and click on the Edit option.
Pages & Subpages: Default Behaviour
The Vertical Navigation Module is useful to display the subpages within a certain page. This means that, by default, when the module is added to a page without subpages, the module will be blank. However, it is possible to change the default behaviour by applying different settings.
1.1. Show All Menu Points
As previously said, by default, the Vertical Navigation Module will only display second-level pages (subpages). By enabling this option, the Module will display all pages in all levels.
1.2. Include Top Level
If you leave 1.1. disabled, it is still possible to choose to include top level pages in your vertical navigation. When this option is enabled, the Module will display all first-level pages, however it will only show the subpages under the main page where the visitor currently is.
1.3. Expand Sideways
By default, the Vertical Navigation menu expands downwards, showing second-level pages below first-level pages. By enabling this option, the Module will expand sideways, displaying second-level pages on the right or left side of first-level pages.
1.4. Expand Direction
In case you have enabled the option Expand Sideways, in this section you will be able to determine whether the menu should expand to the right or left, this means whether second-level pages will be displayed on the right or left side of first-level pages.
1.5. Show Icons
In this section it is possible to determine whether you want to show the page icons on the Vertical Navigation. Learn how and where to define your Page Icons here!
It is possible to style text, background, border and spacing for both the top and the sub level menu.
Firstly it is possible to style the text in terms of font color, size, family, weight, text decoration, italic and uppercase options, as well as alignments. Keep in mind that it is also possible to differentiate some of these options depending on the state - hover, normal or active state.
In this section you can define a background color and set its transparency. Much like the text, it is also possible to differentiate the background color depending on the state - hover, normal or active state.
In this section you can define the border color, width, style and radius. It is also possible to differentiate some of these options depending on the state - hover, normal or active state.
When styling the spacing you can define the margin - which adjusts the space outside of an element; and padding - which adjusts the space inside of an element.
2.5. Container Settings
Lastly you can define a specific color, border and spacing for the overall container (module) where the Vertical Navigation is included.
3. Global Styling
It is possible to style all the Vertical Navigation modules simultaneously and find extra styling options with Global Styling. Under the Global Styling tab, there is a Module Design option on the left menu. Click on it to expand the options and you should find the Vertical Navigation menu. Read more about the Vertical Navigation Global Styling here!