Creating Navigation Menus

Clarity’s navigation menu is getting cluttered, as it shows all the pages by default. The Menu Display fragment’s default configuration shows the site’s page hierarchy. Remember that you excluded Careers, Sign In, and Search from the default menu display, so those pages don’t appear.

To simplify the header navigation menu, Clarity wants just three items to appear in the navigation menu: Shop (page), Blog (page), and More (sub-menu with additional page links).

In addition, navigation menus can add dynamic items to the footer. Clarity’s footer has these menus to define: Shop, Clarity, and Resources.

The Shop menu is blank for now, as it’s configured in Commerce Architect.

First create the header navigation menu:

1. Open the Site Menu () and go to Site Builder → Navigation Menus.

2. Click Add ().

3. Enter Clarity Navigation as the name, then click Save.

4. Click New → Page.

5. In the Select Pages selector, expand the Clarity hierarchy and click Shop, then click Blog.

   

6. Click Select.

The main pages are in place. Next you need a sub-menu called More, with links to the remaining pages.

1. Click Add → Sub-menu.

2. Enter the name More, then click Add.

3. Open the More item’s Actions menu ().

4. Click Add Child → Page.

5. Add About Us and Contact Us to the sub-menu.

   

   The menu is ready to use.

6. The pages you want to show are in place. To make sure new pages are not added to the menu unless the navigation menu is updated intentionally, click Configuration ().

   Disable the configuration for adding new pages to the menu during page creation, then click Save.

   

The menu display fragment showing the current navigation is added to the master page. Configure it to use the new navigation menu:

1. Open the Site Menu (), then click Design → Page Templates.

2. Click the text Clarity MP and you’re taken to the page editor.

3. Click the area on the page with the current navigation. The Menu Display Options configuration appears in the right sidebar.

   

4. Click the Source field, then choose the Clarity Navigation menu.

5. Click Select this Level.

   For a hierarchical structure, you can choose a different level to display in the widget, if it suits your needs. Click More and see that its sub-menu items are shown.

   In addition to these site menus defined in the Navigation Menus application, you can click Contextual Menus to see some additional dynamic menu options. See Configuring Menu Displays for more information.

   Before this exercise, Clarity had three pages hidden from the menu display fragment’s page hierarchy menu: Careers, Sign In, and Search. That menu is no longer in use, but those pages were not explicitly added to the new header navigation menu, so they continue to remain outside of the navigation.

In addition to the header navigation, Clarity needs the menus for the footer: Shop, Clarity, and Resources.

1. Following the same basic procedure used to create the header menu, create the Clarity menu, adding the About Us and Careers pages.

2. Add an external URL to the Clarity menu:

   Name: Retail Customer Portal URL: http://clarityb2b.com:8080

   

   Once finished the Clarity menu contains pages and a URL:

   

3. Create the Resources menu, adding the Blog and Search pages.

   

The Shop menu displays links to product categories. Leave it blank now, as it’s created in Commerce Architect.

Now that the menus are created, add them to the footer.

1. Open the Clarity MP master page by opening the Site Menu () and clicking Design → Page Templates.

2. In the page editor, find the Menu Display widget in the first three grid columns of the footer, under the SHOP, CLARITY, and RESOURCES headings.

   

3. Open each Menu Display widget’s configuration and choose the appropriate menu to display.

   

Now Clarity’s header and footer uses navigation menus to show its lists. The SHOP menu is populated in the Commerce Architect course.

Next: Clarity’s design team has requested a re-design of the Home page, with new fragments and compositions.

Relevant Concepts

• Managing Page Hierarchies
• Configuring Menu Displays
• Using the Navigation Menus Application