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.
On the Settings tab in the right panel, you can find the following settings:
- General
- Menu structure
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.
By default, Menu structure contains menu items of the first, second and third level - Menu (1 lvl.), Menu (2 lvl.), Menu (2 lvl.).
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.
- Show next Menu lvl. - On Hover by default, On Click optionally.
- 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 "lightning bolt" button 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.
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”.
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.
You can style the Menu with the Styles tab in the right panel.
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
- Opened - menu item style when it has been already clicked on (opened)
You can set different font and background colors, borders, and apply other styles to different menu item states. For a smoother transition from one style to another, use the Transitions effect.
By switching your Canvas to the display mode with hamburger menu settings, you can style a mobile menu.
To do this, on the Styles tab in the right panel, select the desired background color, size, and other style properties for a menu.
You can also customize the menu properties on the Settings tab in the right panel. In addition to the settings already described, you can set the Position of the menu: at the left, right, top or bottom of the page.
