See all tutorials

Tutorials » How to create a website menu navigation

The previous tutorial (How to reuse content across web site pages) used a website menu navigation example. If the web application requirements are to highlight each menu item depending on the current page, then the static page module content is not enough.
To highlight a menu item the <li> HTML element would need to become <li class="active">, as seen below

...
<ul class="nav navbar-nav">
    <li class="active"><a href="./">home</a></li>
    ...
</ul>
...

This HTML code will produce the following web page (see the 'home' item highlighted)
website menu navigation example

The static HTML code representing the menu navigation needs to become dynamic so that class="active" attribute to be applied on various li elements depending on the current page.

To create a dynamic website menu navigation, take the following tasks

  1. Add a site page parameter that will customize the menu navigation
  2. Customize the page module website menu with Freemarker script

Add a site page parameter that will customize the menu navigation

Step 1

In Webpagebytes CMS administration interface navigate to the site page representing home content.

Step 2

Create a customization parameter with name 'menuSelection' and value 'home'

Customize the page module website menu with Freemarker script

Step 3

In Webpagebytes CMS administration interface navigate to the page module that contains the menu navigation code and change the 'Source interpretation' to 'Template html source'. This will allow to add Freemarker script to the page module source code.

Step 4

In the same page module as the one from Step3, change the HTML code to use the customization parameter 'menuSelection' to add the class="active" attribute.
Use the HTML code below, it includes also Freemarker scripts.

<#assign homeCss="" documentationCss="" blogCss="" downloadCss="" aboutCss="">
<#assign menu=wpbPageParams["menuSelection"]!"">
<#switch menu>
    <#case "home">
        <#assign homeCss="active">
        <#break>
    <#case "documentation">
        <#assign documentationCss="active">
        <#break>
    <#case "blog">
        <#assign blogCss="active">
        <#break>
    <#case "download">
        <#assign downloadCss="active">
        <#break>
    <#case "about">
        <#assign aboutCss="active">
        <#break>
</#switch>
<nav class="navbar navbar-default" style="margin-top:10px">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">Demo menu</a>
    </div>
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="${homeCss}"><a href="./">home</a></li>
            <li class="${documentationCss}"><a href="./documentation">documentation</a></li>
            <li class="${blogCss}"><a href="./blog">blog</a></li>
            <li class="${downloadCss}"><a href="./download">download</a></li>                  
            <li class="${aboutCss}"><a href="./about">about</a></li>
        </ul>
    </div>
</nav>

Step 5

Make sure all site pages from the menu items have the corresponding 'menuSelection' customization parameter.
  • home page will need to have the parameter value 'home'
  • documentation page will need to have the parameter value 'documentation'
  • blog page will need to have the parameter value 'blog'
  • download page will need to have the parameter value 'download'
  • about page will have the parameter value 'about'

Fork me on GitHub