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.

The default navigation menu displays the site's pages.

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 footer menus are defined by the Navigation Menus application.

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 (Site Menu) and go to Site BuilderNavigation Menus.

  2. Click Add (Add Button).

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

  4. Click NewPage.

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

    Add the Shop and Blog pages to the navigation menu.

  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 AddSub-menu.

  2. Enter the name More, then click Add.

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

  4. Click Add ChildPage.

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

    About Us and Contact Us are in 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 (Cog).

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

    Don't let users add pages to the menu during page creation.

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 (Product Menu), then click DesignPage 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.

    Configure the menu display fragment's options.

  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

    Navigation menus can link to external URLs.

    Once finished the Clarity menu contains pages and a URL:

    The Clarity menu links to pages and an external URL.

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

    The Resources menu links to 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 (Product Menu) and clicking DesignPage 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.

    The first three grid columns have Menu display widgets.

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

    Display each menu in a Menu Display widget in the footer.

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

Clarity's master page uses navigation menus heavily.

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

Relevant Concepts

Capabilities

Product

Contact Us

Connect

Powered by Liferay
© 2024 Liferay Inc. All Rights Reserved • Privacy Policy