Skip navigation links
Digital Experience Studio > Website Technology > Sitecore CMS > XMC Component Guide >

Main Navigation

Main Navigation

The Main Navigation contains the top-level categories for page navigation within a website.

Main Navigation is a part of the header, along with Brand Bar and Masthead. These are found in a site’s Header folder inside the site’s Data node in Content Editor.

The navigation menu (collapsed) within the context of the website header.
Figure 1: Example of the Header component from the MSU homepage. The top red outlined area indicates the Brand Bar, including Audience Links and Global CTA Links. The outlined area in the middle indicates the Masthead. The bottom outlined area indicates the Main Navigation.  

 

A screenshot of an expanded navigation panel.
Figure 2: Example of the Header component from the msu.edu homepage, in its expanded form (shown when hovering on the Admissions Main Navigation Link.) In this case, the Main Navigation has three columns. The right-side column has a CTA area containing an image and link to the application page. 

 

Note: While the search bar appears in this same area, it is a separate site configuration and not considered part of the Header component.

Component Information

Benefits

  • This component displays the Main Navigation bar for the site. It allows users to easily find pages in the site. 
  • The Main Navigation organizes the site hierarchy and allows for some variety in how site links are displayed.
  • The Main Navigation component is made up of Main Navigation Links which may contain additional columns of links and/or call to action, or CTA, area. Column Links are added into columns.

Frequently Asked Questions

A Column Link may not be placed directly under a Main Navigation Link. A Column needs to be inserted under a Main Navigation Link first and then Column Links can be added under the Column.

No, top-level Main Navigation Links may stand alone with nothing below them.

Instructions for Use

In Content Editor:

  1. Locate the site’s Main Navigation folder (sitename > Data > Header > Main Navigation).
  2. Right click on Main Navigation and select Insert in the pop-up panel.
  3. Then choose Main Navigation Link to add the link.
  4. Once selected, enter a name for the link. This name is for internal use only.
  5. Click OK.
  6. Select the desired insert link option.
  7. On the Insert Link panel select or input the desired link and put in the Description/Link Description text. This is the text that displays on the site.
  8. Click Save.
Note: Be sure to add text to the Description field when adding a link when adding any links. This is the only way that link text will appear on the website. 

In Content Editor:

  1. Locate the site’s Main Navigation folder (sitename > Data > Header > Main Navigation).
  2. Select the desired Main Navigation Link.
  3. Right click on the Main Navigation Link and select Insert in the pop-up panel.
  4. Select Column.
  5. Once selected, enter a name for the Column. The name is for internal use only.
  6. Click OK.
  7. Click Save.

In Content Editor:

  1. Locate the site’s Main Navigation folder (sitename > Data > Header > Main Navigation).
  2. Right click on the desired Column and select Insert in the pop-up panel.
  3. Then choose Column Link to add the link.
  4. Once selected, enter a name for the link. The name is for internal use only.
  5. Click OK.
  6. Select the desired insert link option.
  7. On the Insert Link panel select or input the desired link and put in the Description/Link Description text. This is the text that displays on the site.
  8. Click Save.
Note: Be sure to add text to the Description field when adding a link when adding any links. This is the only way that link text will appear on the website. 

In Content Editor:

  1. Locate the site’s Main Navigation folder (sitename > Data > Header > Main Navigation).
  2. Right click on the desired Column and select Insert in the pop-up panel.
  3. Then choose CTA to add the CTA area to the Column.
  4. Once selected, enter a name for the CTA. The name is for internal use only.
  5. Click OK.
  6. Select an image, if desired.
  7. Add the CTA text. This is a required field and will display on the page.
  8. If using the CTA in a right-aligned Main Navigation Link area: Add the date to the Date text field (optional). 
  9. Enter the link the CTA should point to in the CTA Link field.
  10. Select the desired Insert link option. 
  11. Use the Insert Link panel select or input the desired link and put in the Description/Link Description text. This is the text that displays on the site.
  12. Click Save.
Note: Be sure to add text to the Description field when adding a link when adding any links. This is the only way that link text will appear on the website. 

In Content Editor:

  1. Select the Main Navigation (or a subsection, if changes were only made in a subsection, such as a Column).
  2. Right click and select Publish Item. This is also available in the Publish tab under the Publish icon drop-down menu.
  3. In the Publish Item pop-up panel, make sure Smart publish, Publish subitems and Publish related items are all checked.
  4. Click Publish.
  5. On the Message confirmation panel, click OK.
  6. When the publish process completes, click to close the Publish Item panel.
  7. Return to Pages.

In Pages:

  1. To see the Main Navigation changes in Pages, reload the canvas.
  2. Once published, changes to the Main Navigation may take a few minutes before appearing on the live page. It may also require refreshing the browser tab/window.

Tool Use Guide

 

 PagesExplorerContent Editor
Add/edit main navigation link  Optimal
Add/edit column under main navigation link  Optimal
Add/edit column link  Optimal
Add/edit CTA  Optimal
PublishOptimal Possible

 

Documentation updated: Aug. 16, 2024

XMC Component Guide