Skip navigation links

Contextual Navigation

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.
A contextual navigation menu on the Accreditation page showing two levels of links.
Figure 1: Example of a Contextual Navigation component in the context of a page named Accreditation. 

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

Top Navigation Level (drop list)

  • 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.

Bottom Navigation Level (drop list)

  • 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 (drop list)

  • Sidebar navigation is the most common setting to be used in webpages for a contextual navigation.

Flat Structure (checkbox)

  • Checking this box will have all pages appear at the same level, rather than indenting and formatting nested pages.

Include Root Page (checkbox)

  • Checking this box (default) shows the root level page related to the page being viewed.

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 Pages:

  1. Select the page in the Content Tree. The page should use a two-column page layout. See Two Thirds Page Layout INSERT LINK for instructions on creating a page.
  2. Click “+” in the right column placeholder of the container.
  3. Select Contextual Navigation from the component list.
  4. Click the Select content item icon (hamburger + magnifying glass) on the toolbar.

    The Explorer icon outlined on the Contextual Navigation component toolbar.
    Figure 2: The Select content item icon has been marked with a red box.

    Note: If the three icons do not display, try changing the device view setting on the Pages top menu to a larger screen size and scroll to the right, if needed. See Figure 3, above.

  5. In the Assign content item dialog box, expand MSU node, expand the site, expand Home, expand the page and select/expand Data.
  6. Click “+” to the right of the Data item.
  7. Select Navigation List and give it a name that is unique within the page. This is an internal name that will not display.
  8. Click Assign.
  9. Add links and adjust settings, as necessary. See instructions below.

Alternate method:

  1. Click Components tab at top of the Content Tree.
  2. Locate Contextual Navigation and drag it into the right column of the page. The Contextual Navigation component and toolbar are displayed.
  3. Add links and 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 Pages:

  1. Click “+” in the right column placeholder of the container.
  2. Select Contextual Navigation from the component list.
  3. In the Assign content item dialog box, expand MSU node, expand the site, expand Home, expand page and expand Data.
  4. Click “+” to the right of the Data item.
  5. Select Navigation List and give it a name that is unique within the page. This is an internal name that will not display.
  6. Click Assign.
  7. Add links and adjust settings, as necessary. See instructions below.

Alternate method:

  1. Click Components tab at top of Content Tree.
  2. Locate Contextual Navigation and drag it into the right column of the page. The Contextual Navigation and toolbar are displayed.
  3. Add links and adjust settings, as necessary. See instructions below.

Tool Use Guide

 

 PagesExplorerContent Editor
Add componentOptimal  
Adjust top and bottom navigation levelsOptimal  

 

Content updated: Nov. 1, 2024