Prerequisites

  • This step will be easier if you've already migrated over your Pages. There's no need to finish work on these Pages, but creating and naming them will allow you build the Dynamic Menu more easily. 

Introduction


Siteglide Menus are very flexible. You'll need to create a Dynamic Menu in the Admin to define which Pages should be displayed in each Menu. You'll then need to copy across your Layouts into Code Editor. With a few adjustments to the Code, you'll be able to navigate around your new Site in no time.

Creating the New Menus 

We'll start by creating the Menu Structure in the Admin, and we'll come to the code later.

You will need to create a new Menu in the Siteglide Admin for each different list of Links you'll need: For example, if on BC you had a Header Menu with your main links, and a Footer Menu which included different links e.g. Privacy Policy, you'll need to create two Menus on Siteglide- one for each of these.

Firstly, you'll need to head to Modules > Menu Builder in the menu and click the "Add Menu" button.

You'll see two columns when building your Menu. On the left, you have a list of existing pages on your site. Click on one of these to add it to your Menu and you'll see it appears in the right-hand column. 

You can "drag and drop" items in the right-hand column to reorder and create-sub menu-items (we'll be improving the usability of this soon). We'll also refer to sub-menu items as "children" and "dropdown" items.

You can fully edit any items in your Menu by clicking on the link icon. From the edit modal, you can edit the Name and URL of the item as all as add custom classes and define a target type if required.

Menu builder does not yet display existing WebApp items and their Detail Pages, we'll add that soon! For now, you can add any page to your menu, and customise its name and URL to point to any WebApp item you'd like. The same can be done for external links.

Creating Layouts

You've already defined which Pages will appear in your Menu.

Now we'll look at the Layouts. These contain the code which defines the HTML structure for a Menu as it is rendered on the Page. We'll also use Liquid to dynamically fetch the Menu Items from the Menus you created earlier.

Finding the Layouts in Code Editor 

To find, create, edit and delete Layout files, head to Site Manager > Code Editor

Menu Layout folders are stored under layouts/modules/module_2 

The four folders highlighted in yellow in the screenshot above show the four different Layout folders in the example. Each folder contains the files it needs to work as a Layout.

How many Layout Folders do I need?


In BC, you may have used the same Layout for more than one Menu, if they had very consistent styling. Alternatively, you may have used a different Layout for different Menus. The same is true here.

You'll need a new folder for each different Layout you'll be using.

We'll discuss how to create new folders, and which files should be created inside them, in the next section.

Which Files do we need?

BC used three Layouts for Menus: 

  • container.html 
  • group.html
  • childitem.html

Siteglide uses just two layouts: 

  • wrapper.liquid
  • item.liquid

Let's look at how to create a new Layout, and then we'll look at the wrapper.liquid and item.liquid files in a bit more detail.

Creating a new Layout Folder


Right click on the folder containing all the Menu Builder Layouts module_2 and select "Create File". 

It's not possible to create an empty folder without adding files, so in the next screen, add the name of your new Layout (for the folder), followed by a forward slash, followed by wrapper.liquid

This will create the first of the files you need- you should save the file now by clicking in it and pressing Ctrl+s on Windows or Cmd+s (⌘+s)on Mac. Then create the second file, by right-clicking on your folder, selecting "Create File" and adding this time the item.liquid file. 

Finally, you should have the following in Code Editor's File Structure:

Adding your Menu to your Siteglide Site


You can add a Menu anywhere, but if the Menu is intended to be a navbar inside a Header or Footer, we recommend you create a Page Template, add a Header / Footer inside that, and finally output your Menu inside the Header / Footer. 

You can use Toolbox to automatically generate the Liquid code below, or copy it from here. The benefit of using Toolbox is that it will allow you to customise your code with a wizard.  

Here's an example of the code it will add, but Toolbox will help you add the correct Details for your Site to the parameters.

{%- include 'menu', id:'55523', layout: 'my_layout_name', name: 'Main Navigation Menu' -%}


You can use the layout parameter to select the name of the Layout folder you've created. Each Menu can use a different Layout. The ID refers to the dynamic Menu.

Next we'll look at how you can copy your BC Layouts across into Siteglide.

Copying Code from BC to Siteglide Menu Layouts

An Example

In the following example, we have the following BC Layout.

container.html

<div id="myMenu1">{tag_menugroup}</div>

group.html

<ul>{tag_menuchilditem}</ul>


childitem.html

<li {tag_menuitemidname_withid} {tag_menuitemcssclass_withclass}>
  <a href="{tag_menuitemurl}">{tag_menuitemlabel}</a>
  {tag_menugroup}
</li>


We'll give you the steps everyone will need to follow, and also show you what happens to our example after each action.

Populating the wrapper.liquid file

Step 1) First copy across your entire BC container.html code into the wrapper.liquid file.

<div id="myMenu1">{tag_menugroup}</div>

Step 2) Second, replace your BC Tag with your BC group.html Layout contents

You should replace the BC tag: 

{tag_menugroup}

...with the entire contents of your BC group.html Layout.

In our example, it looks like this:

<div id="myMenu1">
  <ul>{tag_menuchilditem}</ul>
</div>

Step 3) Next, you'll need to replace the remaining BC tag with Liquid

Replace the tag from the group.html Layout:

{tag_menuchilditem}

...with the Liquid tag:

{% include 'modules/siteglide_menu/get/get_items', item_layout: 'item' -%}

Our example:

<div id="myMenu1">
  <ul>
    {% include 'modules/siteglide_menu/get/get_items', item_layout: 'item' -%}
  </ul>
</div>

Populating the item.liquid file


Step 1) Copy across the entire code from your BC childitem.html  Layout.

<li {tag_menuitemidname_withid} {tag_menuitemcssclass_withclass}>
  <a href="{tag_menuitemurl}">{tag_menuitemlabel}</a>
  {tag_menugroup}
</li>

Step 2) Replace any ID, class, link, or label tabs from BC with Liquid equivalents

The Liquid tags inside the <li> element can be replaced with:

  • {tag_menuitemidname_withid} => id="{this.menu_id}}" If you use this for styling, you will need to change your CSS to take into account that IDs will be different on Siteglide. We suggest you use classes instead.
  • {tag_menuitemcssclass_withclass} => class="{{this.link_class}}"  or, if they are all the same, you could hardcode them.
  • {tag_menuitemurl} => {{ this.link_url }}
  • {tag_menuitemlabel} => {{ this.link_name }}

To find other fields, if your Layout uses them, head to our main Menu Builder Module article.

The example item.liquid file now looks like this:

<li id="{this.menu_id}}" class="{{this.link_class}}">
  <a href="{{ this.link_url }}">{{ this.link_name }}</a>
  {tag_menugroup}
</li>

You'll notice If you use dropdown menus, or use sub-menu items of any kind - there is one BC tag left. If so, go to step 3. 

If you're encountering issues, head to troubleshooting.

Otherwise, you should have everything you need to Migrate your Menu. 

Step 3) Add Liquid Logic to check if there are dropdown Items inside the current Item

If the Menu uses Sub-Menu Items of any kind, each "level" of item.liquid files will check for any Menu Items that are nested inside them and include more item.liquid files to display each one. To do this, it uses Liquid Logic which:

  • Checks if any Items should be nested inside the current Item- Different HTML structure and classes can be displayed in each case- to make sure any JavaScript or CSS will be effective.
  • If there are any, it includes them

Checking if there are nested Items (children)

{% if this['is_parent'] -%}
  <!-- This Item has nested dropdown Items inside it. -->
{% else %}
  <!-- This Item has no dropdown Items. -->
{% endif %}

In our example, the code we have so far should be copied inside both blocks. We'll make some adjustments, depending on which logical block runs.

{% if this['is_parent'] -%}
  <li id="{this.menu_id}}" class="{{this.link_class}}">
    <a href="{{ this.link_url }}">{{ this.link_name }}</a>
    {tag_menugroup}
  </li>
{% else %}
  <li id="{this.menu_id}}" class="{{this.link_class}}">
    <a href="{{ this.link_url }}">{{ this.link_name }}</a>
    {tag_menugroup}
  </li>
{% endif %}


Step 4) Replace your remaining BC tag, with the Liquid to fetch the nested Dropdown Items

Inside the {% else %} statement, you can delete your BC tag:

{tag_menugroup}

...as in this situation, there will be no dropdown Items to fetch!

Inside the first {% if this['is_parent'] -%} condition, where we know there should be Menu Items, replace your BC tag:

{tag_menugroup}

...with the following Liquid. We set a variable to count the "next level" and we fetch all Items on that level which store the current Menu Item ID as their "parent".

<ul>
  {% assign _next_level = _level | plus: 1 -%}
  {% include 'modules/siteglide_menu/get/get_items', level: _next_level, parent_id: this['forced_id'], item_layout: 'item' -%}
</ul>


Notice, we also add an HTML <ul> element to wrap around the Liquid, as nested dropdown Items will need a container for their <li> elements.

Our example:

{% if this['is_parent'] -%}
  <li id="{this.menu_id}}" class="{{this.link_class}}">
    <a href="{{ this.link_url }}">{{ this.link_name }}</a>
    <ul>
      {% assign _next_level = _level | plus: 1 -%}
      {% include 'modules/siteglide_menu/get/get_items', level: _next_level, parent_id: this['forced_id'], item_layout: 'item' -%}
    </ul>
  </li>
{% else %}
  <li id="{this.menu_id}}" class="{{this.link_class}}">
    <a href="{{ this.link_url }}">{{ this.link_name }}</a>
  </li>
{% endif %}

Troubleshooting Migrated Menu Layouts

HTML structure and Classes

If your Menu looks like a bulleted List, and you're not sure why, it's possible that the CSS from BC is being pulled in correctly, but it is looking for classes or an HTML structure that does not exist in your new Layout?

The problem can be increased if you also use JS to handle dropdown menus. This will also expect a certain HTML structure and classes. Perhaps even other selectors like IDs and data-attributes!

You can check the CSS rules and JS code, to see which selectors they are expecting and cross-reference with your Layout. You can also compare your BC and Siteglide Layouts directly.

Missing Assets


If your Menu looks like a bulleted List, and you're not sure why, it's possible that the CSS or JS from BC is not being pulled in correctly. It's also possible you're missing 3rd party assets like Bootstrap.

Firstly, you can check CMS / File Manager, to see if your CSS and JS files have been uploaded to the Site properly.

If you can see the files there, the next step is to check the Template and <head> element to make sure you are using the correct <link> and <script> elements to pull those assets into the Page.

You can also check in the Browser to make sure the Assets are being linked in correctly. (The following instructions refer to the Google Chrome browser, but they are similar in all browsers.) Firstly, right click the Page anywhere and select "Inspect": 

Next, click the "Console" tab in the Inspect Tools.

Any Assets you've tried to load, but the browser could not find in that location will appear here as red alerts. Clear all of these up with the help of this doc, which will explain how to use the asset_url Liquid filter to pull in Assets


You can also check the elements tab, to inspect the <head> and make sure any linked resources open in a new tab correctly as code.

Missing Data


If your old BC Menu relied on classes stored in the Dynamic Menu in the database, these will need to either be added in the Siteglide database. See the section above on "Creating the New Menus" to do this.

Alternatively, you could re-write your Layout, CSS or JS to make sure the expected classes are there through another method.

Learn More

Check out our doc on Menu Builder for more information on customising Layouts.

Next Steps


Head back to the Migration Section to Migrate the next part of your Site!

Did this answer your question?