Navigation: Menu
Navigation: Menu
Add a Navigation Menu
To add a Menu, open Add Elements from the left panel. In the navigation section, select the Menu element and drag it onto the canvas.
Adding and changing links in the Menu
Editing the Menu
To edit a Menu, select the Menu element. The edit button will appear in the top right corner. Once you clicked the 'edit' button, the menu will switch to edit mode and the Menu properties panel will appear.
On the canvas, your navigation menu will appear.
Resizing the Menu
You can resize the Menu using the indicators in the corners, or just by extending the sides. All the cells in the Menu will grow or shrink accordingly.
To add links and submenus, select the add buttons that appear on the Menu in edit mode.
Menu Properties
When you select a Menu on the canvas or in the index, the Menu properties panel will open up. Alternatively, you can open it by clicking the gear icon in the side panel on the left.
Horizontal or vertical layouts
The Menu properties allow you to change how a Menu is displayed on your canvas: horizontally or vertically.
You have the following choices available to you:
- None: no link will be added, the text will be that, just text
- URL link: add a link to any web address by typing it in
You can have the references page open up in a new tab by selecting the checkbox.
- Link to page: you can add a link to any page in your current project,
- Link to element: or, add a link to any element on the page. Note that this option only works for elements that are on the same page as the Menu. You cannot link to elements on other pages.
Styling Your Menu
You can use a Menu on desktop and mobile variants. By default a Menu will have a horizontal layout on desktop and a vertical one on mobile. You can change these settings in the Menu Properties panel (see above).
Hamburger Menu
When you add a Menu, the default mobile view will give you a hamburger, which, when clicked, will open up the actual Menu.
You can change the way this works by removing the hamburger menu in the canvas or index, and changing the visibility setting of the Menu in settings.
This would allow you to use the Menu as a regular element and place it in other sliding panels.
Creating a responsive Menu
Clicking the 'add' button on a row will add a menu option, or link, to the navigation Menu.
Clicking the 'add' button on a column will add a sub-menu option to the Navigation Menu.
Note: The Menu has a WYSIWYG behavior, so the submenu will always contract, and will become visible by hovering over the arrow on the right of the main Menu option.
You can completely style your Menu. Styling follows the same logic as styling any other elements.
When you select a specific option in the Menu, you will see the styling options become available in the side panel.
There are some styling options available to the Menu itself, which as borders, padding, background color and so on: Select the Menu element itself and then apply the styling on the Menu.
All the available options in the Menu will have by default a style templated applied to them called 'menu option'. You can modify this style to your liking and/or even remove it and apply other styling.
Contact Support
STAY IN THE LOOP
Sign up for product updates