Building a dynamic responsive menu using Liquid

Updated on 28-July-2017 at 7:11 AM

Not only is the new rendering engine making it more simple than ever to generate clear markup for dynamic menus, but it's also proportionally easier to apply an external plugin to obtain a styled and ready to go menu in just a few easy steps. Let's take for example a common type of branched, responsive menu:

To build this type of scenario we have to take just two things into account:

- Building the actual list items with Liquid - this is already addressed in this Liquid Powered Menu tutorial. We'll review the steps anyway for a clear picture.
- Using a menu plugin. We've selected one of the most common frameworks out there: Bootstrap .

Prerequisites and build steps:


With that in check, the process will consist of no more than just 3 steps:

  1. Create and render your menu using Liquid
  2. Install Bootstrap on your site
  3. Customize your Liquid Menu to output in Bootstrap enabled markup

 

Create and render your menu using Liquid

Access Admin > Site Manager > Menus and build your menu.

Now that the menu is built let's insert it on a page or template. Paste the following on your page and replace the menu ID with your own:


{module_menu render="collection" menuId="1593056" template="" collection="menu1"}


We're using template="" to suppress the module's output, so the only render on page will be that of the actual liquid code. Insert the code below anywhere on your page, after the module inserted at the previous step:


<ul id="main-menu" class="sm sm-blue">
  {% if menu1.items %} 
	{% for i in menu1.items %}
  	<li><a href="{{i.url}}">{{i.label}}</a> 
			{% if i.items %}
     		<ul>
			{% for j in i.items %}
				<li><a href="{{j.url}}">{{j.label}}</a> 
					{% if j.items %}
        			<ul>
					{% for k in j.items %}
						<li>
            				<a href="{{k.url}}">{{k.label}}</a>
						</li>
					{% endfor %}
        			</ul>
        			{% endif %}
				</li>
			{% endfor %}
    		</ul>
    		{% endif %}
  	</li>
   {% endfor %} 
  {% endif %}
</ul>

The liquid logic must apply to the already rendered contents of the module, that's why the module must be placed on page before the liquid code. Switching order will cause the liquid code to address a collection ('menu1') that isn't yet generated, hence nothing will be output

You can see the code above rendered at liquidexamples.worldsecuresystems.com . Yours should look the same.

Install Bootstrap on your site

Having downloaded the Bootstrap package, you should own three folders: css, fonts & js.

Using any FTP client, simply copy them to the root of your site.

Bootstrap is ready. On any page that you want to use the bootstrap framework on you need to reference the scripts and styles you've just copied.

Build a Bootstrap menu on a BC page

Let's now choose a menu type from the Bootstrap nav bar examples section . Bootstrap offers a basic template to create pages with the framework but also suggests modifying these existing examples.

We chose getbootstrap.com/examples/navbar-static-top . We'll just copy the source and use it to create our page in BC.

Select "Add Page" from Admin > Site Manager > Pages. Paste the code copied from the bootstrap page. Update the locations of scripts and stylesheets.

Your page should look like this: liquidexamples.worldsecuresystems.com/bootstrap-menu . If we analyze the menu structure, we'll notice it actually consists of two separate menus (unordered lists). We'll customize menu #1, depicted below.

Customize your Liquid Menu to output in Bootstrap enabled markup

We've already seen how the Liquid generated menu looks like in Step #1 . To convert that to a Bootstrap-styled menu, we just need to apply the classes used by Bootstrap to our own menu. Here's a comparison of the markup generated in both cases:

 

For the sake of this example, to be able to compare outputs and work clean and intuitively, we'll create a copy of the bootstrap-menu page and insert the Liquid menu there. We've called it liquid-menu.

Since this new page is a copy of bootstrap-menu, the bootstrap menu is already in place.
What we need to do next is:

insert the BC menu module, anywhere before the bootstrap menu:


{module_menu render="collection" menuId="1593056" template="" collection="menu1"}

Insert the Liquid code, making sure to update the markup so that it matches the Bootstrap one.


<ul class="nav navbar-nav">
  {% if menu1.items %} 
	{% for i in menu1.items %}	
{% if i.items %}
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" href="{{i.url}}">{{i.label}}<span class="caret"></span></a> 
{% else %}
<li>
<a href="{{i.url}}">{{i.label}}</a> 		
{% endif %}
{% if i.items %}
     		<ul class="dropdown-menu" role="menu">
			{% for j in i.items %}
				<li><a href="{{j.url}}">{{j.label}}</a> 
					{% if j.items %}
        			<ul>
					{% for k in j.items %}
						<li>
            				<a href="{{k.url}}">{{k.label}}</a>
						</li>
					{% endfor %}
        			</ul>
        			{% endif %}
				</li>
			{% endfor %}
    		</ul>
    		{% endif %}
  	</li>
   {% endfor %} 
  {% endif %}
</ul>

The Liquid markup is build via a series of FOR loops. To customize the list item associated with a dropdown menu item we added an additional IF, testing if a dropdown (so if another <ul> is following, in which case the necessary markup is added:

The liquid generated menu is now inserted within the Bootstrap Nav bar. With the proper classes in place, it's blending in perfectly: liquidexamples.worldsecuresystems.com/liquid-menu. Re-size window to see it in action.