website logo
⌘K
Introduction
PORTAL
Agency Whitelabelling
PAGES
Pages - Accessing Page Data
Pagination Layouts
Page Templates
FORMS
Form Confirmation Pages
Adding a Progress Bar
Adding Custom CSS To Show Form Submit Process
Dynamic Content in Workflow and Autoresponder Emails
How to output Custom Field Set fields in a Form's Custom Layout
Custom JavaScript Validation for Forms
File Upload Previews
FAQ
CATEGORIES
Filtering WebApps and Modules by Categories
Outputting Categories on WebApp / Module / eCommerce Layouts
Outputting Category Fields in any Location
Category Detail Layouts
FAQ
COMPANY INFORMATION
Company Information
SITE SEARCH
Site Search
PUBLIC API/ZAPIER
Zapier - Formatting arrays correctly
Public API/Zapier Changelog
MODULES
Module Marketplace
Building Custom Modules
Siteglide Modules
Front-end Submit Modules
DATA STRUCTURES
Automations
Creating WebApps from the CLI
Field Types
WEBAPPS
Front-end Submit WebApps
Layouts
Search and Filtering
Understanding Custom Field Names and IDs
FAQ
CRM
User Details
User Secure Zones
Storing User's Favourite WebApp / Module Items
User's Form Submissions (Cases)
How Users Edit their Email and Password Front End
Editing a User's CRM record Front End with Custom Field Sets
CLI
Introducing Siteglide CLI
CLI Changelog
Secure Zones with CLI
Page Templates with Siteglide CLI
Pages with Siteglide CLI
Includes with Siteglide CLI
Managing Email Templates
Migrate - Manual Form setup
Migrate - Convert existing Forms
Liquid
Accessing Assets
Liquid Dot Notation
Using WebApp Collections- Tutorial
Using the current_user object with Secure Zones
Preventing Duplicate Content with Query Parameters- Canonical URL and Robots.txt
FAQ
GraphQL
Tutorial Overview
About GraphQL
Tutorial 1- Your First Query
Tutorial 2 - Pagination
Tutorial 3 - Filtering the Results
Tutorial 3 - Answers to the First Filtering Challenge
Tutorial 4 - Advanced Filtering
Tutorial 4 - Challenge Answers
Tutorial 5 - Using Liquid to run GraphQL queries on your Site
Tutorial 6 - Variables
Tutorial 6 - Answers to the Variables Challenge
Tutorial 7 - Sorting
Tutorial 8 - Building a Liquid API GET Endpoint Page powered by GraphQL queries
Best Practice and Performance
Module/WebApp Caching
Getting Started with Liquid Caching - to Reduce Server Response time and Improve Performance
Includes
ecommerce/checkout_standard
Frequently Asked Questions
Using Liquid Logic to Check if a field exists, or is empty on the Front End
How do I learn more about Liquid?
How to setup a multi domain start page
Docs powered by archbee 
14min

Menu Builder

Create a nested Menu Structure using the Pages you've built and customise its layout Menu Builder automatically displays existing pages on the left-hand side for you to add to the menu, which is on the right hand side. To add menu items that link to WebApp items, or to external links; add an existing page and click on the link icon to edit the fields. You can fully customise all fields from here.

Syntax

HTML
|

Parameters

  • id - the Menu's ID
  • layout - default is /default/ - 'layout' values are relative to the folder: layouts/modules/menu (module_2)/[layout name]
  • name - name of the Menu

Liquid Tags

Field Name

Liquid Tag

Description

Current Level 

Menu Items

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

outputs all top level menu items with li. 

Should be used in wrapper.liquid

Current Level Name

{{ this['link_name'] }}

outputs Menu item name. 

Should be used in item.liquid

Current Level URL

{{ this['link_url'] }}

URL of the item

Current Level 

custom class

{{this['link_class']}}

Class field contents for current item

Sub Levels 

Menu Items

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

outputs all sub level menu items with the current layout applied. 

Should be used in item.liquid. 

This essentially creates a loop until it reaches the bottom level of your menu

Mark As Parent

{{ this['is_parent'] }}

an invisible field used to define if an item has sub-items or not. 

If item has sub items it's value will be: true 

if an item does not have sub items it's value will be: false

Layout Files

Menu Builder Module layouts are stored in the following folder structure, which you can view via Code Editor: layouts/modules/Menu (module_2)/

Within this module folder you will find the following layout folders:

  • default/ - the layout folder
    • item.liquid - menu item file
    • wrapper.liquid - menu item wrapper file

Example - wrapper.liquid

The wrapper file is used to wrap the menu item output and should contain the liquid for outputting the menu items. You can wrap your menu with any content you'd like, such as a plain <ul> tag, or a section wrapper with a title.

HTML
|

Example - item.liquid

The item file is the chosen output for our items. In this example we've got two cases being used.

HTML
|

1. The item is a parent, so has sub items.

  • This means we output the item, and then increment the 'level' value in order to output this item's sub-items.
  • In this case, we use the same item output for every level. You may want a different file for each level. To do that, on line 8 you should set the item_layout as 'level2' for example. Then you should create a new copy of this 'item' file called 'level2' and put your new layout for the second level there. Alternatively, you can target each level in an {% if -%} statement, but we suggest using new files to separate the layouts more easily.
  • Since we use this same layout for every level, it loops until the bottom level, where the item is no longer a parent.

2. The item has no sub-items

  • This means we simply output the item, and nothing else.
Updated 19 Oct 2021
Did this page help you?
Yes
No
UP NEXT
Secure Zones
Docs powered by archbee 
TABLE OF CONTENTS
Syntax
Parameters
Liquid Tags
Layout Files
Example - wrapper.liquid
Example - item.liquid