The Contextual Navigation is a vertical side navigation that displays in the right column of a two-column layout. The component is a list of all child pages under a selected parent page. Navigation items are automatically selected and displayed based on the starting point in the site hierarchy.
Note: The Contextual Navigation is also referred to as Non-Curated Contextual Navigation.
Component Information
Benefits
- Use the Contextual Navigation component to provide an alternate way of navigating on the website.
- The Contextual Navigation component provides a list of all pages in a section of the website.
- The Contextual Navigation provides a quick way of moving between pages because the visitor does not have to open the main navigation, or mega nav, and does not have to search on a topic.
- The Contextual Navigation populates automatically, making it easy for content authors to add to webpages without manual curation effort.
Example Use Cases
- Provide an alternate navigation method.
- Provide a fast way to move between related pages.
- Provide a scannable list of all pages in a section of the website.
Template Data
Start Level (droplist)
- Select the tier of web pages that should be the starting level for the navigation.
- If you’re not sure which to select, choose one and wait for the preview to adjust in the content area.
- The selected level will show as the menu title in bold.
End Level (droplist)
- Select the depth for web pages that should be included in the menu.
- If you’re not sure which to select, choose one and wait for the preview to adjust in the content area.
- Pages in the site that appear at lower nested tiers than selected will not be included in the menu.
Navigation Filter (droplist)
- Sidebar navigation is the most common setting to be used in webpages for a contextual navigation.
- Options:
- Breadcrumb Navigation
- Sidebar Navigation
- Sitemap Navigation
Frequently Asked Questions
No, the Contextual Navigation only includes the page titles.
Instructions for Use
A Two Thirds Page is a two-column page layout. The two-column design applies to all page content.
In Page Builder:
- Select the page in the Content Tree. The page should use a two-column page layout. See "Create a Page" for instructions on creating a page.
- Click “+” in the right column placeholder of the container.
- Select Contextual Navigation from the component list.
- Adjust settings, as necessary. See instructions below.
Alternate method:
- Click Components tab at top of the Content Tree.
- Locate Contextual Navigation and drag it into the right column of the page. The Contextual Navigation component and toolbar are displayed.
- Adjust settings, as necessary. See instructions below.
A Contextual Navigation component can also be used in a Two Thirds Sublayout. This two-column container applies to the section of page content added to the container. The Contextual Navigation can be added in the narrow column on the right.
In Page Builder:
- Click “+” in the right column placeholder of the container.
- Select Contextual Navigation from the component list.
- Adjust settings, as necessary. See instructions below.
Alternate method:
- Click Components tab at top of Content Tree.
- Locate Contextual Navigation and drag it into the right column of the page. The Contextual Navigation and toolbar are displayed.
- Adjust settings, as necessary. See instructions below.
- Click the Contextual Navigation component to select it and open the right side component panel.
- Click the Design tab.
- Click to expand the Advanced Styling menu.
- Select a Start Level from the drop down. This indicates the starting depth within the site tree for this Contextual Navigation component.
- Select an End Level from the drop down. This indicated the ending depth within the site tree for this Contextual Navigation component.
There have been reports that a Contextual Navigation component can be unresponsible to selection in Page Builder once added to the page, making it a challenge to access the component options menu.
To select the Contextual Navigation component on the page in instances where clicking the component does not suffice:
- Click the Layers icon (between Pages and Components) on the left side panel.
- Scroll through the list of page content layers to find the Contextual Navigation components.
- Click the name of the component. It will select the component on the page and the component options menu should now be available.
- If the options menu is still not visible, check to confirm the panel is expanded. A small arrow icon will toggle to show or hide the panel.