Introduction
Navigation menus for a site are typically tied strictly to a site's page hierarchy and structure. The Navigation Menus feature in Liferay is powerful because it enables you to create navigation menus that are decoupled from a site's page hierarchy. Liferay navigation menus can be driven by pages, content, categories, and more so that you can design the exact navigation experience you want.
This recipe guides you through creating a custom menu and displaying it as a reusable navigation bar within your Liferay site using Navigation Menus and Master Page Templates.
Prerequisites
Liferay DXP environment
A user with permissions to create and manage Navigation Menus and Master Page Templates
Two or more site pages created in Liferay DXP
Steps
On your Liferay DXP instance, open the Site Menu, expand Site Builder, and click Navigation Menus.
Click New to create a navigation menu.
Enter
Main Navigationfor Name and click Save.This creates a blank menu and redirects you to its edit page.
Click Add to display a list of available types of items you can add to the menu.
Select the Page item type.
Check the pages you want to include in the navigation menu.
Click Select to save your changes to the menu.
Drag and drop the pages into your desired order.
Now that you've created a navigation menu, you can incorporate it as a page element within any site page or page template. Here, you'll use it in a master page template.
Open the Site Menu, expand Design, and click Page Templates.
In the Masters tab, click New.
Enter
Primary Master Pagefor Name and click Save.Open the Fragments and Widgets tab in the side panel.
Drag and drop a Container fragment to the top of the template.
Go to the Browser tab in the side panel, double-click the name of the container, and rename it
Header Navigation Bar.Select the container and configure these settings in the configuration side panel:
Tab Setting Value General Container Display Flex Row General Align Items Center General Justify Content Center General Container Width Fixed Width Styles Spacing > Padding Spacer 3 (top and bottom)
Spacer 6 (left and right)From the Fragments and Widgets tab, drag and drop a Menu Display fragment into the Header Navigation Bar container.
Select the Menu Display fragment.
In the configuration side panel, click Change Source for the menu's source.
Click Main Navigation and click Select This Level.
Click Publish Master.
You can update a menu item's display name by clicking Actions for one of the items and selecting View Info.
When designing a page, it’s recommended to always put elements into their own containers. This can help provide more control over styling.
Use the green boxes to add padding. This adds space between the container and its contents.
Make sure you select the Menu Display fragment, not the widget option.
Conclusion
Congratulations! You've learned how to create a custom menu and use it as a navigation bar in your page templates.