Getting Started

Table of Content

1. 1. Requirements
2. 2. Installation
3. 3. Terminologies
   1. 3.1. Mega Menu
   2. 3.2. Mega Item
   3. 3.3. Mega Submenu
   4. 3.4. Normal Submenu
   5. 3.5. Top-Level Submenu & Sub-Level Submenu
   6. 3.6. Top-Level Items & Sub-Level Items
   7. 3.7. Icon, Badge, Item Label & Submenu Indicator
   8. 3.8. Off-Canvas (Canvas) & Overlay
   9. 3.10. Dropdown Panel
   10. 3.11. Menu Header
   11. 3.12. Initial Bubble
4. 4. Fundamental Elements
5. 5. First Steps

1. Requirements

All you need is an active installation of the Bricks Builder version 1.9.9 or greater.

2. Installation

If you’re familiar with installing a WordPress plugin, just go ahead with the standard routine.

If you’re new to WordPress, please refer to WordPress codex’s instruction to know how to install a plugin.

3. Terminologies

3.1. Mega Menu

A Mega Menu is a whole menu which has at least one Mega Item.

3.2. Mega Item

A Mega Item is a parent menu item which has a Mega Submenu

3.3. Mega Submenu

A Mega Submenu is a submenu which can contain any kind of content, not just menu items:

3.4. Normal Submenu

A Normal Submenu is a submenu which contains just menu items only:

3.5. Top-Level Submenu & Sub-Level Submenu

1. Top-Level Submenu is either a Mega Submenu or the very first Normal Submenu.
2. Sub-Level Submenu is a submenu of a submenu, regardless its level.

*Please note that these terms are relative to the closest menu container, not the outmost menu container.

3.6. Top-Level Items & Sub-Level Items

Below image illustrates the terms:

*Please note that these terms are relative to the closest menu container, not the outmost menu container.

3.7. Icon, Badge, Item Label & Submenu Indicator

Below image illustrates the terms:

3.8. Off-Canvas (Canvas) & Overlay

1. Canvas Panel is a panel which is hidden by default. By clicking on the menu toggle button, this panel will appear, covers entire screen with or without an overlay and temporarily block the page behind it from interaction:

2. Overlay is the mask layer which covers part of the page when a Menu is active. For example, the dark transparent layer below:

3.10. Dropdown Panel

Dropdown Panel is a panel which is also hidden by default. By clicking on the menu toggle button, this panel will drop down as you can see in the image below. It does not cover entire screen or block the page behind it from interaction.

You can close a Dropdown Panel by clicking on the menu toggle button only.

3.11. Menu Header

Menu Header is the top section of a Paged Off-Canvas Menu.

3.12. Initial Bubble

It’s the circle behind the Toggle Button of a “Fullscreen Menu” with “Bubble” entrance animation of the Off-Canvas.

4. Fundamental Elements

There are four cornerstone elements:

1. Items Wrapper - To contain menu items only.
2. Parent Menu Item - To build menu items which have submenus.
3. Childless Menu Item - To build menu items which don’t have submenus.
4. Submenu - To contain submenu content of a Parent Menu Item.

And bases on those four elements, Mortar Menu also defines eight ready-to-use layouts:

5. First Steps

1. On the elements searchbox, search for “mortar” keyword.
2. Choose a menu layout and add it to the builder.
3. Add some menu items.
4. Save the builder.

That’s all to get started. Let’s move to the next topic: Menu Layouts