Building a dynamic responsive menu using Liquid

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 .

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:

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

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:

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: