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.
Component Options and Limitations
- This component can be placed in either a:
- Two-Column Sublayout — A “Basic Page” is used. The page content area is full-width except where the Two-Column Container is placed.
- Two-Thirds Container — A “Two-Thirds” page is used. The content area is a two-column layout on the page.
- The component can only be placed in the right column. It cannot appear on the left side of the page.
- No links to media or external pages are allowed.
- No buttons can be added.
- Styles menu options:
- Start Level can be specified to display which node or page to start the navigation, relative to the current page.
- End Level can be specified to display the maximum number of levels (hierarchy) of pages, relative to the current page.
Guidelines
- This component can only be placed in the right column.
- The Two-Column Container or Two Thirds Page do not appear in Content Editor.
- Navigation items appear in the same order in which they reside in the Content Tree.
- Navigation title is required. It is always a link and usually will link to the main page in the list of navigation items.
- The Contextual Navigation component is usually shared between some or all the pages in the list for a consistent user experience.
- Use the same start and end level settings across Contextual Navigation components within a section of a website to ensure a consistent user experience across pages.
- The component will adapt its items based on the page where it is added, so only one Contextual Navigation component is needed per site, unless variants and settings differ for pages.
- The Contextual Navigation lists the starting page and all child pages under it in the site hierarchy.
- All items in the Contextual Navigation are visible all the time. There is no option to expand/contract child and parent links.
- The Contextual Navigation is not “sticky,” meaning it disappears as the visitor scrolls down the page.
- Contextual Navigation items show hierarchy. Parent-child relationships are indicated by indentation and background color of pages.
- The current page is bolded in the Contextual Navigation.
- Start Level can be specified to display which node or page to start the navigation, relative to the current page.
- End Level can be specified to display the number of levels (hierarchy) of pages, relative to the current page.
- The navigation items are automatically generated by Sitecore, starting at the topmost parent page of the currently displayed page. No links to media or external pages are allowed. No buttons can be added.
Related Components:
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.