Introduction

You will need to create a new Menu in the Siteglide Admin and copy its structure from your old site. This can be outputted in your Header or elsewhere with the help of Toolbox and you can fully customize the layout.

Building a New Menu

To build a new Menu, head over to Menu Builder within Modules in the left-hand menu of your Admin 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).

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, 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.

Copying over Layouts

BC used three Layouts for Menus: 

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

Siteglide uses just two layouts: 

  • wrapper.liquid
  • item.liquid

wrapper.liquid

 This file should contain your BC container.html and you should paste your group.html layout within this.

item.liquid

This file should contain the code from your BC childitem.html Layout.

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

Example of BC Layouts:

Container:

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

Group:

<ul>{tag_menuchilditem}</ul>

Childitem:

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

Example of Siteglide Layouts:

Wrapper:

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


Item:

{% comment %} If this item has children, output the item, and then go get its children {% endcomment %}

{% if this['is_parent'] -%}
  <li class="{{this['link_class']}}">
    <a href="{{this['link_url']}}" target="{{this['link_target']}}">
      {{this['link_name']}}
    </a>

{% comment %} Wrap children in <ul>, set the next level, and then get the children {% endcomment %}

      <ul class="dropdown">
        {% 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>            

{% comment %} Else just output the item by itself {% endcomment %}

{% else -%}
  <li class="{{this['link_class']}}">
    <a target="{{this['link_target']}}" href="{{this['link_url']}}">
      {{this['link_name']}}
    </a>
  </li>
{% endif -%}

If you have any questions while migrating your Menu Layouts, get in touch via our Intercom in the bottom right-hand corner of your Admin and we'll be happy to help.

Did this answer your question?