Configuring Navigation Menus

To display and configure a Navigation Menu, you can use the Menu Display Fragment (available in Liferay DXP 7.4+) or Navigation Menu Widget. With any of these two options, you can define the menu display options and create different navigation levels for your Site.


Configuring the Menu Display Fragment is easier than the Navigation Menu Widget, and you have preview options working with Master Page Template that Navigation Menu Widgets do not provide.

Configuring the Menu Display Fragment

Available: Liferay DXP 7.4+.

Using the Menu Display Fragment, you can create a navigation menu anywhere in your Content Page. This navigation menu is based on your Site’s Public or Private Pages hierarchy, or any other hierarchy you define using Liferay DXP Navigation Menus. You can also define the menu display style options and the number of sub-levels to include in the navigation.

The Menu Display Fragment appears under the Fragments and Widget section of your Content Page. You add and configure this Fragment as with other Fragments in your Content Pages. For more information, see Adding Elements to Content Pages and Configuring Elements on Content Pages.

The Menu Display Fragment appears under the Fragments and Widget section of your Content Page.

You can build the hierarchy of pages and subpages in the Menu Display Fragment using two methods:

  • Site Navigation Menus (A) uses the menus you define using the Liferay DXP Navigation Menu for Site navigation. By default, Liferay DXP provides two Site Menus based on the Public Pages and Private Pages hierarchies in your Site.

  • Contextual Menus (B) shows a menu that is based on the Page context. For example, you can create a more advanced navigation by combining a first-level Menu Display Fragment linked to one of your Site Menus with a second-level Menu Display Fragment that only shows the child Pages. This way, when the user clicks through the different Pages in the first-level menu, the second-level menu changes dynamically to show the children Pages.

You can define the hierarchy of the Menu Display Fragment from your Site Menus or from Contextual Menus.

Configuring the Navigation Menu Widget

Below are all the options possible in the Navigation Menu widget. To access the Configuration menu, click Options icon at the top of the navigation menu widget.

Navigate to the Configuration menu.

Display Templates

You can select a Widget Template for navigation menus:

Select the Display Template.

Display Template Description
List Menu Displays all the items in a vertical list.
Pills Horizontal Displays the items horizontally and uses a button style for highlighting.
Pills Justified Like Pills Horizontal, but pads the items to fill out the horizontal space.
Pills Stacked A vertical version of the pills style.
Tabs Displays the items like navigation tabs.
Tabs Justified Navigation tabs that fill horizontal space.
Bar Minimally Styled A lightweight version of the default display that you see in the embedded menu on your page.
Bar Minimally Justified Styled Like Bar Minimally Styled with horizontal padding.
Bar Default Styled The default embedded menu.
Split Button Dropdowns Displays each item as a button with a dropdown for multiple navigation levels.