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.
