Menu

Menu is a widget that can be used to organize navigation on a web page.

The widget helps create and flexibly customize a menu on a website, for example:

• create multi-level menus

• create horizontal or vertical menus, as well as those the form of columns

• adapt menu display to different devices

You can create several menus of different types on a page, for example, a horizontal menu in the header and a column-like menu in the footer.

Menu settings

On the Settings tab in the right panel, you can find the following settings:

• General
• Menu structure

General settings

General settings allow to display menus on mobile devices at different resolutions. By moving the slider, you can set a resolution at which a menu will be displayed as a hamburger menu or a sidebar. By default mobile hamburger menu is not applied to any resolution.

For example, if you set the slider to the Tablet position, the mobile menu will be displayed on tablets and smartphones in both horizontal and vertical orientations. If you set the slider to the Mobile Portrait position, the hamburger menu will appear only on smartphones in vertical orientation.

The Block page scrolling option disables the ability to scroll the page when the mobile menu is opened.

Menu structure

By default, Menu structure contains menu items of the first, second and third level - Menu (1 lvl.), Menu (2 lvl.), Menu (3 lvl.). The second and third levels are hidden by default.

You can open the settings of menu items by clicking on the Settings button to the left of its name.

In the new widow, you can set the following properties:

• Layout - defines the structure of the first level items: horizontally, vertically, in columns.
• Type - only Default for items of the first level.
• Select first element by default - allows you to display the list of Menu items nested under the first item of any level in the menu for mobile devices.
• Items - by default, the Menu has already several items of the first level. You can create a new item by clicking on "+" to the right of the heading.

Menu items of any level can be:

• renamed

• moved by holding the icon with three stripes to the left of the item name

• deleted by clicking on "-"

• you can also change the action settings for an item by clicking the icon to the left of its name

For the column-like menu, you can use the Number of columns settings. There are three columns in the menu by default.

Menus of the second and subsequent levels

You can add menu items of subsequent levels by clicking on "+" to the right of the heading. You can delete menu items on any level by clicking on “-” to the right of its name.

You can also specify settings for menu of any level by clicking on the Settings button to the left of its name.

As with the first level menu, you can specify the position of a menu, its type, and more in the settings. Click on “+” next to the corresponding top-level menu item to add a new menu item. You can also show or hide these items on the Canvas by clicking on the “eye”.

Action Details

You can apply the following action settings to menu items:

• Action trigger – Click action trigger is used by default and cannot be changed. An action for a menu item occurs only when you click on it.
• Action - determines the action that will occur when clicking on a menu item. The Go to page action is used by default.

You can use the following actions:

• Go to link – add a link in the Link field that will be used to move to another page when clicking it. You can set to open the link in a new tab.
• Go to page – select a project page from the drop-down list, which you will be redirected to when clicking on it. You can set to open the page in a new tab.
• Go to anchor – use Select element button to set an anchor on a page (for example, a section), which you will be redirected to when clicking on an item.
• Send mail – add an email address in the Email field, which a user letter will be sent to. When clicking on a menu item with the Send mail settings, a user application will be opened for sending a message.
• Phone – add a phone number in the Phone field that will be dialed when clicking on an item. This action is available on mobile devices.

Menu Styles

You can style the Menu with the Styles tab in the right panel.

Select the desired menu element — Menu Item or Menu Link — in the Layers tab or on the Canvas, and set its styles in the Design tab. For example, you can change the background of the menu items or add borders to them.

Menu styles for different states

We recommend to set styles for menu items in different states:

• Hover - menu item style when hovering over it with the mouse cursor
• Active - menu item style when clicking on it
• Focus - menu item style when focusing on it

You can set different font colors, background colors, borders, and other styles for various states of a menu item.

For example, to style a menu item on hover:

1. Select the Menu Link element.
2. In the Design tab, add the Hover state.

3. Set the desired text color that will apply when hovering over the menu item.

To create a smooth transition between styles, use the Transitions effect for all menu item states.

You can also set styles for the Opened and Current menu items. Learn more — Styling opened and current menu items.

Styles and settings for the mobile (hamburger) menu

By switching your Canvas to the display mode with hamburger menu settings, you can style a mobile menu.

To style the menu button:

1. Select the Menu Button element in the Layers panel or on the canvas.
2. In the Design tab, set the desired background color, size, and other styles. You can hide the default background by clicking the eye icon and then add your preferred background color. You can also replace the hamburger icon using the Background Image setting.

You can also customize the menu properties on the Settings tab in the right panel. The default type set for the mobile menu is Slide. You can also set the Position of the menu: at the left, right, top or bottom of the page.