Skip navigation links

Curated Navigation

The Curated Navigation is a vertical side navigation that displays in the right column of a two-column layout. It consists of a customized list of links, navigation icons and/or a call-to-action, or CTA, button. Navigation items are manually selected and maintained by the content author.

A screenshot of a curated navigation with a button
Figure 1: Example of a Curated Navigation component with a CTA button. 

Component Information

Benefits

  • Provides an alternate way of navigating on the website
  • Visually highlights links and a call to action, or CTA, relevant to the content on the current page
  • Gives content authors control to modify component, unlike the automatically generated Contextual Navigation component
  • Navigation is “sticky” and stays visible on screen as the user scrolls the page

Example Use Cases

  • Provide an alternate navigation method
  • Provide a fast way to move between a list of pages selected by the content author
  • Provide a navigation that can be shared among multiple pages
  • Create a side column navigation menu that includes a CTA button. This can be helpful for highlighting important links, such as an intranet link on an employee page. 

Template Data

Navigation Link Type (droplist)

  • Type of link
  • Values: 
    • Internal
    • Media
    • External (default)
  • Required field

Navigation Link Text (single-line text)

  • Text displayed on the link

Navigation Link (general link)

  • Link URL 
  • Required field

Navigation Icon (droplink; Content Editor only)

  • List of navigation icons that can be selected for display to the left of a navigation item

Text (single-line text)

  • Text to be shown in the button
  • Required if using CTA

Link (general link)

  • The location or page to take the user to when they click the button
  • Required if using CTA

Frequently Asked Questions

No, the Curated Navigation only includes the page titles.

Only one button is allowed. It displays below the navigation items. However, a Rich Text component with a custom button can be added above the navigation component. This would not be “sticky” as users scroll on the page.

Change the device view setting on the Pages top menu to a larger screen size and scroll right if needed.

The device preview menu icons
Figure 2: Device view settings menu. 

Instructions for Use

Curated Navigation component can be used on a Two-Thirds Page Layout or in a Two-Thirds Page Sublayout component on a regular page.

A Two-Thirds Page is a two-column page layout. The two-column design applies to all page content. The Two-Thirds Page Sublayout adds a two-column section to a page. The page outside of the two-column section will be one-column.

In Pages:

  1. Select the page in the Content Tree. The page should use a two-column page layout or two-thirds page sublayout component. 
  2. Click “+” in the right column placeholder of the container.
  3. Select Curated Navigation from the component list.
  4. In the Assign content item dialog box, expand Navigation node and select the appropriate Navigation List or click “+” to the right of the Data item, and select Navigation List to add a new list. Give it a name that is unique within the page. This is an internal name that will not display.
  5. Click Assign.
  6. Add links and adjust settings, as necessary. See instructions below.

Alternate method:

  1. Click Components tab at top of the Content Tree.
  2. Locate Curated Navigation and drag it into the right column of the page. The Curated Navigation component and toolbar are displayed.
  3. In the Assign content item dialog box, expand Navigation node and select the appropriate Navigation List or click “+” to the right of the Data item, and select Navigation List to add a new list. Give it a name that is unique within the page. This is an internal name that will not display.
  4. Click Assign.
  5. Add links and adjust settings, as necessary. See instructions below.

In Pages:

  1. Select the Curated Navigation component in the page area.
  2. Add the required navigation heading and link: 

    1. Click the text field at the top of the navigation.
    2. In the Link right column, enter Link type, Link text and URL.
    3. Click anywhere on the page to enable the Link column changes.


    Note: Right-column settings are applied to all fields in the entire component.

  3. Click on the Curated Navigation component to select it.
  4. In Curated Navigation right column, expand Manage items.
  5. Click + Add new to create a new navigation item.
  6. Click on the link placeholder in the component to select it. This opens the Link menu in the right column.
  7. Use the Link menu to set link type, link text (what appears in the menu) and link URL.

    Note: Editing links is also possible using Explorer or Content Editor. Editing in Content Editor provides additional capabilities, including navigation icons. See instructions below.

  8. Click on the component to deselect the link and return to the full navigation component menu in the right column. 
  9. Repeat steps four through seven, as necessary, to add additional links. 
  10. To include a button, click on “[No text in field]” in the green button at the bottom of the menu. Set the link settings. If no link is added here the button will not appear in preview or on the live webpage.
  11. View the page using Preview (eye icon in upper right).  
  12. Publish the page.

Begin in Pages:

  1. Click the Curated Navigation component to display the toolbar.
  2. Click Box with arrow icon on the toolbar to open Explorer. It opens in a new browser tab.
A curated navigation component toolbar with the Explorer icon outlined in red
Figure 3: The Explorer icon has been marked with a red box.

In Explorer:

  1. Select each link in the list of Curated Navigation links to make changes. Links should be edited individually.
  2. To change link content, edit the appropriate fields. For text-based fields, such as the link name, click the pencil icon to edit. 
  3. New links can be created by clicking + Create below the list of links in the left column.
  4. Return to Pages.

In Pages:

  1. Refresh the screen to see the changes. 
  2. View the page using Preview (eye icon at the upper right).
  3. Publish the page. 

Begin in Pages:

  1. Locate the nine-dot cube icon in the upper left. 
  2. Select the environment. 
  3. Select Content Editor.

In Content Editor:

  1. Locate the navigation list in the Content Tree. It should be located in the Navigation folder within the site’s Data folder. 
  2. To add a button:
    1. Click on the navigation list name to select it.
    2. On the data panel, use the link setting tools to add a link to the CTA field.
    3. Click Save.
  3. To add a new link:
    1. Right click on the navigation list name.
    2. Click Insert.
    3. Click Navigation Link.
    4. Add a name that is unique within the list of links. Click OK.
    5. Click Insert link to add an internal link to add a link to a page within the same website or to a page on another MSU Sitecore XM Cloud website. Click external link to add a link to another website. Click insert media link to add a link to an item in the Media Library, such as a PDF. 
    6. Follow the link selection process, depending on the type of link being added.
    7. Optional: To include a navigation icon, select one from the Icon dropdown menu on the link Data panel.
    8. Click Save
  4. Repeat as necessary to add additional links.

    Note: An existing navigation item can be duplicated and then changed, as needed.

  5. Return to Pages.

In Pages:

  1. Refresh the screen to see the changes. 
  2. View the page using Preview (eye icon at the upper right). 
  3. Publish the page. 
  1. Navigate to the FontAwesome website.
  2. Locate the desired icon and note its unique code.
  3. In Sitecore Global Configurations > Icons > Navigation Icons, Insert a navigation icon and enter the retrieved code.
  4. The navigation icon now displays in the dropdown selection list in a site.

Tool Use Guide

 

 PagesExplorerContent Editor
Add componentOptimal  
Add/edit linksOptimalPossiblePossible
Add icons to links OptimalPossible

 

Documentation updated: Nov. 1, 2024