Link Search Menu Expand Document

Menu Layouts

Mortar Menu comes with eight predefined layouts which cover almost every kind of menu you may have seen.

Table of Content

  1. 1. Horizontal Menu
  2. 2. Vertical Menu
  3. 3. Off-Canvas Menu
  4. 4. Paged Off-Canvas Menu
  5. 5. Fullscreen Menu
  6. 6. Tabbed Menu
  7. 7. Dock Menu
  8. 8. Dropdown Menu

The basic steps for all layouts are:

  1. Add a menu layout into a Column or a Container.
  2. Add menu items into the Items Wrapper. basic menu structure

1. Horizontal Menu

horizontal menu

It’s straightforward to work with. Just add the menu layout, add menu items and you’re good to go.

2. Vertical Menu

vertical menu

A note about this layout:

  1. To set the width of a submenu, you can either select “Custom” on the “Width As” control of a submenu or set the "width" on the Style tab.

3. Off-Canvas Menu

off-canvas menu

Some notes about this layout:

  1. On the General control group, switch on “Keep Canvas Open While Editing” to keep the Off-Canvas open while editing.
  2. Another control on the General control group is “Vertical Submenu” - when enabled, submenus will be rendered as submenus of the Vertical Menu. The main purpose is to create something like this:

multi-level vertical submenus

4. Paged Off-Canvas Menu

multi-level vertical submenus

Some notes about this layout:

  1. On the General control group, switch on “Keep Canvas Open While Editing” to keep the Off-Canvas open while editing.
  2. On the builder, to keep menu content editable, submenus are not paged. Submenus will be displayed as in an Off-Canvas Menu. Please check on the frontend for a correct layout.

5. Fullscreen Menu

fullscreen menu

Some notes about this layout:

  1. On the General control group, switch on “Keep Canvas Open While Editing” to keep the Off-Canvas open while editing.
  2. You can move the Items Wrapper around like this:

movable items wrapper

6. Tabbed Menu

tabbed menu

This menu layout is for nested tabs inside a Mega Submenu only. It’s not a stand-alone menu and is for Desktop only.

A note about this layout:

  1. You don’t need to divide columns. Just add the Tabbed Menu directly into a Container. Normal Submenus will inherit the width of the Items Wrapper and the last submenu will automatically take remaining width of the container.

tabbed menu inside a container

7. Dock Menu

dock menu

This menu layout is for both Desktop and Mobile.

A note about this layout:

  1. Currently, inside a Dock Menu, mega content of a submenu accepts Section templates only:

dock menu - mega templates

8. Dropdown Menu

dropdown menu

It’s straightforward to work with. Just add the menu layout, add menu items and you’re good to go.


Last modified: Aug 25 2024 at 11:12 AM.