Add the Secondary Navigation Menu to the About Page

Previous Step

Add a Two Columns Page Configuration

After configuring a two-column page and updating the News Overview, News Detail, and Content page configurations to extend it, you can now add a secondary navigation menu to the right column of the Content page configuration used by the About page.

Create a Freemarker Template for the Right Column Menu

  1. Open the about.html file in your web design source.

  2. Find the <div class="col-md-3 col-sm-3"> element in about.html. This element contains the markup for the right column menu. Select this <div> and all its contents, then copy it to your clipboard.

  3. In your project, create a new file at repository-data/webfiles/src/main/resources/site/freemarker/gogreen/twocolumns-right-menu.ftl. This file will serve as the Freemarker template for the right column menu.

  4. At the top of the new template, add the following line:

<#include "../include/imports.ftl">

  1. Paste the copied HTML markup below this line. The template now contains the static HTML for the menu.

  2. In the Console, navigate to /hst:gogreen/hst:configurations/gogreen/hst:templates.

  3. Add a new child node named twocolumns-right-menu of type hst:template.

  4. Add a property hst:renderpath to the twocolumns-right-menu node and set its value to webfile:/freemarker/gogreen/twocolumns-right-menu.ftl.

/hst:gogreen/hst:configurations/gogreen/hst:templates/twocolumns-right-menu:
  jcr:primaryType: hst:template
  hst:renderpath: webfile:/freemarker/gogreen/twocolumns-right-menu.ftl

Add the Right Column to the About Page and Content Page Configurations

  1. In the Console, go to /hst:gogreen/hst:configurations/gogreen/hst:workspace/hst:pages/about-contentpage/main.

  2. Add a new child node named right of type hst:component.

  3. Add a property hst:template to the right node and set its value to twocolumns-right-menu.

/hst:gogreen/hst:configurations/gogreen/hst:workspace/hst:pages/about-contentpage/main:
  jcr:primaryType: hst:component
  /left:
    jcr:primaryType: hst:containercomponent
  /right:
    jcr:primaryType: hst:component
    hst:template: twocolumns-right-menu
  1. Open your website in a browser and navigate to the About page. The static menu should now appear in the right column.

About page with secondary navigation menu in right column

  1. In the Console, go to /hst:gogreen/hst:configurations/gogreen/hst:workspace/hst:pages/about-contentpage/main/right.

  2. Copy the right node to /hst:gogreen/hst:configurations/gogreen/hst:pages/contentpage/main:

/hst:gogreen/hst:configurations/gogreen/hst:pages/contentpage/main:
  jcr:primaryType: hst:component
  /left:
    jcr:primaryType: hst:containercomponentreference
  /right:
    jcr:primaryType: hst:component
    hst:template: twocolumns-right-menu

Create Content

  1. In the CMS, open the Content application and navigate to GoGreen > content.

  2. Create two new content documents: "Quick Facts" and "Terms & Conditions". Use the content from the corresponding pages in your web design.

  3. Publish both documents.

Make the Menu Dynamic

  1. In the Console, navigate to /hst:gogreen/hst:configurations/gogreen/hst:workspace/hst:sitemenus/main/About.

  2. Add a new child node named Quick Facts of type hst:sitemenuitem.

  3. Add a property hst:referencesitemapitem to the Quick Facts node and set its value to content/quick-facts.html.

  4. Add another child node named Terms & Conditions of type hst:sitemenuitem.

  5. Add a property hst:referencesitemapitem to the Terms & Conditions node and set its value to content/terms--conditions.html.

/hst:gogreen/hst:configurations/gogreen/hst:workspace/hst:sitemenus/main/About:
  jcr:primaryType: hst:sitemenuitem
  /Quick Facts:
    jcr:primaryType: hst:sitemenuitem
    hst:referencesitemapitem: content/quick-facts.html
  /Terms & Conditions:
    jcr:primaryType: hst:sitemenuitem
    hst:referencesitemapitem: content/terms--conditions.html

Note: This configuration uses the sitemap item at /hst:gogreen/hst:configurations/gogreen/hst:sitemap/content/_any_.html, which was added by the Simple Content feature in Sprint 1.

  1. In the Console, go to /hst:gogreen/hst:configurations/gogreen/hst:workspace/hst:pages/about-contentpage/main/right.

  2. Add the property hst:componentclassname to the right node and set its value to org.onehippo.cms7.essentials.components.EssentialsMenuComponent. This component retrieves a menu from the content repository.

  3. Add the property hst:parameternames and set its value to menu.

  4. Add the property hst:parametervalues and set its value to main.

/hst:gogreen/hst:configurations/gogreen/hst:workspace/hst:pages/about-contentpage/main/right:
  jcr:primaryType: hst:component
  hst:componentclassname: org.onehippo.cms7.essentials.components.EssentialsMenuComponent
  hst:parameternames: [menu]
  hst:parametervalues: [main]
  hst:template: twocolumns-right-menu

This configuration enables the component to retrieve the main menu.

  1. Apply the same properties to /hst:gogreen/hst:configurations/gogreen/hst:pages/contentpage/main/right:
/hst:gogreen/hst:configurations/gogreen/hst:pages/contentpage/main/right:
  jcr:primaryType: hst:component
  hst:componentclassname: org.onehippo.cms7.essentials.components.EssentialsMenuComponent
  hst:parameternames: [menu]
  hst:parametervalues: [main]
  hst:template: twocolumns-right-menu
  1. Update the twocolumns-right-menu.ftl template to render menu items dynamically using Freemarker syntax.

Implementation details:

  • The Menu component exposes the menu as a variable named menu of type org.hippoecm.hst.core.sitemenu.HstSiteMenu.
  • Access menu items through the siteMenuItems attribute.
  • Access child menu items through the childMenuItems attribute.
  • Use the hstLink attribute for the resolved link.

A typical dynamic menu template looks like this:

<#include "../include/imports.ftl">
<#if menu??>
  <div class="hst-container">
    <div class="hst-container-item">
      <#if menu.siteMenuItems??>
        <#list menu.siteMenuItems as item>
          <#if item.selected || item.expanded>
            <div class="list-group left-nav">
              <a href="<@hst.link link=item.hstLink/>" class="list-group-item level1">${item.name?html}</a>
                <#list item.childMenuItems as item>
                  <a href="<@hst.link link=item.hstLink/>" class="list-group-item level2"><i class="fa fa-angle-right"> </i>${item.name?html}</a>
                </#list>
            </div>
          </#if>
        </#list>
      </#if>
    </div>
  </div>
</#if>
  1. Open the About page in your browser. The right column now displays the dynamic menu items you configured. Clicking a menu item navigates to the corresponding content page.

About page with secondary navigation menu in right column

Next Step

Develop the Products Feature

Full Source Code

twocolumns-right-menu.ftl

<#include "../include/imports.ftl">
<#if menu??>
  <div class="hst-container">
    <div class="hst-container-item">
      <#if menu.siteMenuItems??>
        <#list menu.siteMenuItems as item>
          <#if item.selected || item.expanded>
            <div class="list-group left-nav">
              <a href="<@hst.link link=item.hstLink/>" class="list-group-item level1">${item.name?html}</a>
                <#list item.childMenuItems as item>
                  <a href="<@hst.link link=item.hstLink/>" class="list-group-item level2"><i class="fa fa-angle-right"> </i>${item.name?html}</a>
                </#list>
            </div>
          </#if>
        </#list>
      </#if>
    </div>
  </div>
</#if>
Share Feedback
Page: /getting-started/build-a-website-tutorial/develop-new-features/add-secondary-navigation-menu
Section: Getting Started
Category *
Add Secondary Navigation | Bloomreach Content Documentation