Okay, that is a mouthful. To rephrase my compound title, we'll be talking about an approach that 

1. uses search to
2. update a content item that
3. follows a structure tailored to a
4. template that renders a megamenu.

There! Thats the flow in a nutshell. If that already has the gears turning in your head, then you're welcome. Ta-ta! But if you need more, read on.

Note that I'm discussing a design here, resorting to low-level implementations only where needed. Undertanding the moving parts in this design/approach is the real value of this post.

What is a megamenu?

You've seen them. Megamenus are everywhere. A megamenu is basically a beautiful and useful kink in your navigation. Most navigation HTML provides a hierarchical menu reflecting your sitemap. But every so often, a business may want to break away from that mundaneness and give the user a rich navigational experience.

For a quick example, visit amazon.com and hover over any item under Shop by Department. Each of those is a megamenu.

Our Simple Course Megamenu

Consider the below megamenu which we will use as a case study for the purposes of this post.

It features 4 tabs. Each tab shows a list of courses arranged alphabetically. Clicking a course takes you to the course content page. All courses are Liferay journal articles of a custom subtype called Course.

The Megamenu Content Structure

More often than not, the information we display in a megamenu has a well-defined structure. For the above example, we can quickly define a content structure for our megamenu that would look something like this:

Tab (Text/Repeats)
   Course Letter (Text/Repeats)
        Course Title (Text)
            Course URL (Text)

Using the above structure, you could manually create all the content necessary for our courses megamenu. Sounds crazy! Right. And we don't want to do anything crazy! So hang in there.

The Megamenu Content Template

Here is the stripped-down megamenu template that uses the structure above to render the megamenu.

<div class="mega-dropdown-nav-container">
  <ul class="nav nav-pills nav-justified block-light" role="tablist">
    #foreach ($studyLevel in $txtQualificationLevel.getSiblings())
      <li role="presentation">
        <a data-target="#$studyLevel.txtIdentifier.getData()" aria-controls="#
           $studyLevel.txtIdentifier.getData()" role="tab" data-toggle="pill"><strong>
              $studyLevel.getData()</strong></a>
      </li>
    #end
  </ul>
</div>

<div class="mega-dropdown-tab-container">
  <div class="tab-content">
    #foreach ($studyLevel in $txtQualificationLevel.getSiblings()) 
      <div role="tabpanel" class="tab-pane $active" id="$studyLevel.txtIdentifier.getData()">
        <div class="mega-dropdown-menu-inner">
          #foreach ($letter in $studyLevel.txtLetter.getSiblings())
            <ul>
              <li class="dropdown-header">$letter.getData()</li>
                #foreach ($course in $letter.txtCourseTitle.getSiblings())
                  <li><a href="/-/$course.txtFriendlyUrl.data">$course.getData()</a></li>
                #end
            </ul>
          #end
        </div>
      </div>
    #end
  </div>
</div>

Theme Navigation Trigger

navigation.vm

#foreach ($nav_item in $nav_items)
#if ($velocityCount == 3) ### drop the COURSES megamenu item here
#parse ("$full_templates_path/megamenu.vm")
#end
...

What we have so far

• A megamenu content structure
• A megamenu content template
• A megamenu content item (journal article) tied to that structure and template

Putting Search to work

1. Fire a search to bring back all content of type course
2. Sort the courses
3. Partition the courses into four buckets corresponding to the four tabs on the megamenu. We use a custom field called studyLevel for each course that serves as the discriminator for the tabs
4. Organize the courses into the object model that is convertible to our Megamenu content XML document.
5. Convert the object model to XML
6. Retrieve the megamenu content item
7. Update it with the XML
8. Done.

Useful Code Snippets

Faceted Search Configuration

Calling into the Search API