Secondary Navigation component
The Secondary Navigation is used to expose navigation categories that are too deep to be viewed from the top navigation. A Secondary Navigation is generally shown in conjunction with a primary navigation (a.k.a. main navigation, top navigation) although the two are completely separate.
Component(s) you might want to use with this one:
- Separator to create spacing between the Secondary Navigation and the surrounding components.
Design options
In most cases, the Secondary Navigation component is used in sections and subsites with content deeper than 2 levels.
Two layouts are available for this component:
- Vertical (default layout) for the Right Sidebar template
- Horizontal layout for the other templates
Other options:
- The Root category can be displayed or not
- The Max Depth can be set depending on the depth of the child categories
Guidelines
The Secondary Navigation component can be used with any page template. On the Content-Right Sidebar template, it should be placed at the top of the right-hand column. On the other page templates, the Secondary Navigation should be placed under the page title (either a simple top heading or with an introductory text).
Like for the top navigation, only the non-hidden categories are displayed in the Secondary Navigation.
The component contains the following fields:
| Root path | The path for the root (parent) category for the pages to be displayed. |
| Display root | The option to display the root category name. Displaying the root category provides a clear clue about the context. |
| Max depth | Specify a number between 1 and 3. The number you input will be validated. |
| Horizontal options | The following options only apply to the horizontal layout. |
| Horizontal | The option to display the Secondary Navigation horizontally. The default layout is vertical. |
| Width | Possible values: 940px, 1200px. |
| Bottom border | The option to display a separator below the navigation. |
Dos
Example #1: Secondary Navigation used with default layout (vertical) - with Root category displayed.
Example #2: Secondary Navigation used with default layout (vertical) - without Root category.
Example #3: Secondary Navigation used with horizontal layout - without Root category.
Don'ts
- Do not use the horizontal layout if the categories wrap over multiple lines.
- Avoid using more than one Secondary Navigation on a given page.
Helpful tips & "gotchas"
The maximum depth, from the Root category is 3 which means that you may display 2 additional levels besides the specified root category. If your navigation is deeper than this, you will have to change the root (to a deeper level). You could also question why the navigation is so deep and look for opportunities to expose more categories at a higher level.
Training
The Secondary navigation component is covered in the Advanced training course.
In general, the Web Team will do the initial setup for the Secondary Navigation so you'll see how it is used in a specific context.
Need support?
The Web team is here to help.