Using the Navigation Menus Application
The Navigation Menus application is used to create custom menus for Site Pages and content. With it, you can determine which elements are included in a menu, and how they’re organized. Once created, you can display your custom menus using Page Fragments or Widgets.
For Liferay 7.3 and earlier, Pages are the only entity that can be added to a Navigation Menu. As of Liferay 7.4 U1+, Navigation Menus support adding additional entity types to a Navigation Menu.
On Liferay 7.3+, you can use Custom Fields to add more information to items in Navigation Menus (under Site Navigation Menu Item in the Custom Fields menu). You can then use this information with Application Display Templates to further customize your navigation menus.
Creating Navigation Menus
Follow these steps to create a Navigation Menu:
Open the Site Menu (
) and go to Site Builder → Navigation Menus.
Click the Add button (
).Enter a name for the Navigation Menu.
Click Save.
This redirects you to the new custom menu where you can begin adding elements (e.g., Pages, Documents, Categories).
Adding New Elements to a Navigation Menu
While editing a Navigation Menu, follow these steps to add an element to the Navigation Menu:
Click the Add button (
).Select the type of element you want to add to the menu (e.g., Page, Document, Category). This opens an item selector window.
You can add multiple elements to the same menu.
Select the elements you want to add and click Select.
You can select multiple elements.
importantWhen the added element does not have an associated display page, Liferay shows a warning. Items without a display page do not have links and are hidden from menus.
Optionally, drag and drop menu elements to reorganize them or arrange them in a hierarchy.
tipIn addition to structuring menu elements into a hierarchy, you can also use the Submenu type to add subsections to a menu. If you delete an element with child elements, the child elements are also removed.
Optionally, define custom display names for each of your menu elements. You can define custom names for page elements, or for any content type elements that use Display Pages (including blog entries, web content articles, documents, Vocabularies, and Categories).
noteYou can only define custom display names for content type elements using Display Pages on Liferay 7.4 versions U9+ or GA13+.
To do this, select a menu element, check Use Custom Name in the side panel, enter a name, and click Save.
All changes to the menu are saved.
Using Dynamic Vocabulary Elements
Vocabulary Navigation Menu elements are dynamic; when one is displayed on a page, it adds all of the Categories and Subcategories in its current hierarchy instead of a single element. Any changes to the Vocabulary’s contents are automatically reflected in the menu.
Dynamic Vocabulary elements allow you to quickly and easily update your Navigation Menus when you have changing hierarchies of items. For example, you can use Categories to represent types of products in a Catalog, and then let any updates to your Categories automatically update any menus using the Vocabulary. Then, depending on the Display Page used for those Categories, any changes to the categorization may automatically reflect in the pages and the Navigation Menu.
Previewing Navigation Menus
You can a preview a Navigation Menu while you are editing it to see how it looks when displayed on a page. Click the eye icon (
) to open a popup window with a preview of the Navigation Menu.
You can also select different options from the drop-down menu to see different styles the menu can be displayed in, such as the List or Tabs styles.
Using Menus During Page Creation
When Users are creating Site Pages, they are shown a list of all existing Navigation Menus. You can modify this behavior by hiding specific menus from the list of available menus.
Follow these steps to configure this behavior for a Navigation Menu:
Open the Site Menu (
) and go to Site Builder → Navigation Menus.Select the desired menu.
Click the Actions button (
).Uncheck/Check the setting.
Click Save.
Configuring Navigation Menu Type
Follow these steps to configure the Navigation Menu’s type:
Open the Site Menu (
) and go to Site Builder → Navigation Menus.Click on the Actions button (
) for the desired menu.Select the desired navigation type: Primary Navigation, Secondary Navigation, or Social Navigation.
Once selected, each menu’s configuration appears in the Marked As column.
| Navigation Menu Type | Usage |
|---|---|
| Primary Navigation | Primary Navigation is the main navigation for a page. |
| Secondary Navigation | Secondary Navigation is a second level of navigation, possibly a sidebar or a separate menu within a page. |
| Social Navigation | Social Navigation is for menus that contain links for sharing content on social media or similar tasks. |
Deleting a Navigation Menu
- Click the Actions button () next to the desired navigation menu (for example, New Menu) then Delete.
- Click OK in the confirmation.
The Navigation Menu has been deleted.