Building Clarity's Custom Navigation Menu

Templating can help streamline content creation and enforce consistent branding. Clarity wants to use Liferay's templating capabilities to build a navigation menu that highlights the Tickets menu item for distributor users.

In these exercises, you'll create a widget template, implement a unique styling for the Tickets menu item, and apply it to Clarity's distributor master page.

Here, you'll create a navigation menu widget template that uses Freemarker logic to style the Tickets menu item.

Open the Site Menu (), expand Design, and select Templates.
Go to the Widget Templates tab.
Click New and select the Menu Display Template option.
Enter Clarity Distributor Navigation Menu as the template name.

Replace the template editor's content with this code snippet:

<style>
    .nav-pill-special {
        border: 2px solid var(--color-brand-primary);
        border-radius: 40px;
        padding: 4px 10px;
        justify-content: center;
    }

    #navbar_clarity_top_nav .list-menu ul {
        list-style: none;
    }

    #navbar_clarity_top_nav .nav {
        font-size: inherit;
        font-weight: inherit;
    }

    #navbar_clarity_top_nav .lfr-nav-item < a {
        color: inherit;
    }

    #navbar_clarity_top_nav .lfr-nav-item.selected < a {
        color: var(--color-brand-primary);
    }

    #navbar_clarity_top_nav .lfr-nav-item < a:hover {
        color: var(--color-brand-primary);
    }
</style>

This adds CSS styling to the navigation menu.

Insert two new lines below the code you've added and paste this code snippet:
```
<div id="navbar_clarity_top_nav" class="text-center w-100">
    <ul aria-label="Site Pages" class="navbar-blank navbar-nav navbar-site d-inline-flex" role="menubar">

    </ul>
</div>
```
This adds the navigation bar container and a inline list element. To populate the list, you'll use the template's elements.
Place your cursor between the <ul> and </ul> tags.
In the Elements sidebar on the right, click the Navigation Entries option under Fields.
Verify this code snippet appears after selecting the option:
```
<#if entries?has_content>
    <#list entries as navigationEntry>
        ${navigationEntry.getName()}[$CURSOR$]
    </#list>
</#if>
```
This adds a Freemarker expression that dynamically displays navigation menu page entries as single items. Now, you'll add a different styling to the Tickets menu item.

Replace the ${navigationEntry.getName()}[$CURSOR$] line with this code snippet:

<li class="lfr-nav-item nav-item" role="presentation">
    <a class="nav-link text-truncate" href="${navigationEntry.getURL()}" role="menuitem">
        <#if navigationEntry.getName()?c_lower_case?contains("tickets")>
            <span class="text-truncate nav-pill-special">${navigationEntry.getName()}</span> 
        <#else>
            <span class="text-truncate">${navigationEntry.getName()}</span> 
        </#if>
    </a>
</li>

This includes a Freemarker conditional that applies a different styling to the Tickets page item when the code detects it during processing.

Ensure the code resembles this:

<div id="navbar_clarity_top_nav" class="text-center w-100">
    <ul aria-label="Site Pages" class="navbar-blank navbar-nav navbar-site d-inline-flex" role="menubar">
        <#if entries?has_content>
            <#list entries as navigationEntry>
                <li class="lfr-nav-item nav-item" role="presentation">
                    <a class="nav-link text-truncate" href="${navigationEntry.getURL()}" role="menuitem">
                        <#if navigationEntry.getName()?c_lower_case?contains("tickets")>
                            <span class="text-truncate nav-pill-special">${navigationEntry.getName()}</span> 
                        <#else>
                            <span class="text-truncate">${navigationEntry.getName()}</span>
                        </#if>
                    </a>
                </li>
            </#list>
        </#if>
    </ul>
</div>

Click Save.

Great! You've created a custom template for the Menu Display widget and implemented specific styling for the Tickets menu item. You can now use the template in site pages.

Here, you'll add the Menu Display widget to the Distributor Master Page template and apply the Clarity Distributor Navigation Menu template to the widget.

Open the Site Menu (), expand Design, and select Page Templates.
Within the Masters tab, click the Distributor Master Page template to start editing it.
From the Fragments and Media menu, drag and drop the Menu Display widget into the Header Navigation container.

NOTE
Not to be confused with the Menu Display fragment.
Hover over the widget, click Actions () in the top right corner of the widget, and select Configuration.

Configure these settings:

Section	Setting	Value
Navigation Menu	Choose Menu	Header Page Menu
Navigation Menu	Display Template	Clarity Public Enterprise Website > Clarity Distributor Navigation Menu

Click Save and close the modal window.
Click Publish Master to save your changes.
A warning about template propagation may display. Click OK to proceed and save the changes.
Go to Clarity's Tickets page and examine the new navigation menu's visual.