Menus

 Last Edited: Jul 02, 2019

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 and childitem.html.

Siteglide uses just two layouts: wrapper.liquid and item.liquid.

wrapper.liquid should contain your BC container.html and paste your group.html layout within this.

item.liquid 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.