Implementing Clarity's Navigation Menus

Navigation is an integral part of designing a clear and intuitive user experience. Liferay’s navigation menus provide an intuitive way to organize and render links to internal pages, content, and external sources. After wireframing their pages, Clarity has identified navigation menus they want to incorporate into their website’s headers and footers.

In these exercises, you’ll implement these custom navigation menus and apply them to Clarity’s master pages.

Exercise: Adding Clarity’s Header Navigation Menu

Clarity needs a navigation menu for their page header that only includes these pages: Products, About Us, Blog, FAQ, Careers, and Contact Us. Here you’ll create this navigation menu as Walter Douglas.

  1. Sign in as Walter Douglas.

    • Email: walter.douglas@clarityvisionsolutions.com
    • Password: learn

  2. Open the Site Menu(Liferay's Product Menu), expand Site Builder, and click Navigation Menus.

  3. Click New.

  4. For Name, enter Header Page Menu and click Save.

    For Name, enter Header Page Menu and click Save.

    This creates an empty menu and directs you to its edit page. Now you can add pages to it.

  5. Click Add.
    This displays a list of available types of items you can add to the menu.

  6. Select the Page item type.
    Select the Page item type.

  7. Check these pages and click Select:

    • About Us
    • Blog
    • Careers
    • Contact Us
    • FAQ
    • Products

    Check the pages and click Select.

    This saves your changes to the menu.

  8. Drag and drop the pages into this order:

    • Products
    • About Us
    • Blog
    • FAQ
    • Careers
    • Contact Us

Great! With the menu created and organized, it’s ready to use in Clarity’s master page templates. Before you use it, you’ll create some additional menus for Clarity’s footer.

Clarity needs to implement several footer navigation menus to ensure users can easily find legal information, contact details, and other resources. Here you’ll add these menus as Walter Douglas.

  1. Return to the Navigation Menus overview page.

  2. Create a new menu named Footer About Us Menu.

  3. Add these pages:

    • About Us
    • About Us
    • Careers

    Add the following pages.

    NOTE
    To add the About Us page again, select and add it to the menu a second time.

  4. For the first About Us page item, click Actions (Actions icon) and select View Info (Information icon).
    This opens a side panel where you can update the item’s information.

  5. Check Use Custom Name, enter Leadership for Name, and click Save.

  6. Repeat steps 4-5 for the second About Us item and rename it Our Impact.

    Repeat steps 4-5 for the second About Us item and rename it Our Impact.

  7. Return to the Navigation Menus overview page and create a new menu named Footer Legal Menu.

  8. Click Add and select the Web Content Article item type.

  9. Click Sites and Libraries in the breadcrumb menu, go to the Asset Library tab, and select the Legal library.

  10. Select the Cookie Policy web content article.
    This adds the article to the navigation menu. Once selected from the presentation layer, it’ll redirect the user to the article’s default display page template.

  11. Repeat steps 8-10 to add the remaining articles in the Legal asset library:

    • Terms of use
    • Privacy Policy

  12. Return to the Navigation Menus overview page and create these menus:

    Menu Items
    Footer Get In Touch Menu Page > Contact Us
    Footer Products Menu
    • URL

      • Name: Contacts

      • URL: /web/clarity/g/contacts

    • URL

      • Name: Eyeglasses

      • URL: /web/clarity/g/eyeglasses

    • URL

      • Name: Lenses

      • URL: /web/clarity/g/lenses

    • URL

      • Name: Sunglasses

      • URL: /web/clarity/g/sunglasses
    Footer Resources Menu
    • Page > Blog
    • Page > FAQ


    Return to the Navigation Menus overview page and create the new menus.

Great! You’ve implemented and configured Clarity’s navigation menus. Next, you’ll apply them to Clarity’s master page templates.

Exercise: Updating Menu Display Fragments

The training workspace already includes Clarity’s master pages, which contain predefined menu display fragments. You can configure these fragments to determine which navigation menu to display.

Here, you’ll update the header menu display fragments in Clarity’s master pages as Walter Douglas.

  1. Open the Site Menu(Liferay's Product Menu), expand Design, and click Page Templates.

  2. In the Masters tab, click the Primary Master Page template to start editing it.

  3. Select the Menu Display fragment in the header.

  4. In the configuration side panel, click Change Source (Change Source icon) for the menu’s Source.

  5. Click Header Page Menu and click Select This Level.

    Click Header Page Menu and click Select This Level.

  6. Repeat steps 3-5 for each Menu Display fragment under the Page Footer container:

    Section Menu Display Source
    Products Footer Products Menu
    About Us Footer About Us Menu
    Resources Footer Resources Menu
    Get In Touch Footer Get In Touch Menu
    Legal Footer Legal Menu


    Repeat steps 3-5 for each Menu Display fragment under the Page Footer container.

  7. Click Publish Master.

  8. Repeat this process to update the Secondary Master Page’s menu display fragments.

Great! Now Clarity can display their navigation menus in all pages connected to these master page templates.

Conclusion

With Liferay’s navigation menus, you can separate item organization from the presentation layer. This enables you to reuse menus and style them for specific needs across your site. By learning how to use them effectively, you can deliver interconnected, smooth digital experiences.

Next, you’ll learn how to organize content with categories for dynamic navigation.

loading-knowledge-label