The Menu widget allows you to add a navigation menu for your website. It is typically a visual interface that enables you to organize the website pages or sections into a hierarchical structure. You can define primary menus, submenus, and dropdown menus to organize your site content. It allows users to understand the website organization and easily find the information they are looking for. Each menu item represents a specific page or section of the website. It is typically displayed as a clickable link or a button. Clicking on a menu item takes the user to the corresponding page or triggers an action.
Adding a Menu Widget
To add a Menu widget:
- Go to the Visual Editor from Channels on the Dashboard Left Panel.
- Navigate to the Widgets list on the Visual Editor Left Panel.
- Type the widget name in the search bar, or expand the Navigation grouping and select the Menu widget.
- Drag and drop the Menu widget from the list onto the desired crafting area of the Layout Canvas.
Configuring the Menu Widget
Once you have added the Menu widget, click the widget to activate the Property Panel where you can customize its Styles, Content, and Settings according to your preferences.
To configure the Menu widget:
- Go to Styles to modify the widget styling features:
- Select one of the following modes to design the widget layout: Burger, Vertical, or Horizontal.
- Choose how the widget is displayed on your website (only the label, only the icon, label with left or right icon).
- Configure the principal styling features (see Global Styles).
2. Go to Content to make the necessary configuration of the widget content:
- Add menu items to be displayed in your website menu and make them clickable for easy access. The items can be external links, products, phone numbers, email addresses, main pages (e.g. FAQ, Home, About), system pages, etc. This enables your users to easily find the information they are looking for.
3. Go to Settings and expand Visibility to modify the widget visibility. Select who can view the Menu widget according to the customer’s location, session status, type of used device, browser, language preference, etc. (see Visibility Settings).
Modifying the Menu Widget Properties
Once you have configured the Menu widget, you can modify the corresponding properties inside the Menu widget according to your preference. This allows you to define the appearance and functionality of the widget on your website.
The following properties are available:
Menu Content allows you to add menu items (external links, products, phone numbers, email addresses, etc.) displayed within a Menu widget. The content of the Menu widget is typically organized hierarchically, with top-level menu items leading to submenus or directly triggering an action. The menu content depends on your website purpose, its structure, and the needs of the target audience.
- Menu Item allows you to modify the individual entities displayed within a Menu widget:
- Choose how the item is displayed on your website (only the label, only the icon, label with left or right icon, etc.).
- Activate a submenu for the Menu item. In this case, the Menu item acts as a container for submenus and contains additional options related to the main item. For example, you can add an item “About“ with submenu items “Our Store“, “Our Team“, etc. Submenu items are typically indicated by an arrow icon next to them, and when selected, they expand to reveal more choices.
- Select how the submenu is displayed in open mode, e.g., drop-down list.
You can set the state of the submenu item to define how the submenu is displayed on your website.
The following states are available:
- Closed Submenu refers to a specific state when the submenu item is hidden until the user opens the submenu. The closed submenu provides a compact representation of the available options, keeping the website interface tidy. Once the user clicks or hovers over the submenu, it expands and reveals the submenu items, allowing the user to select the corresponding option.
- Opened Submenu refers to a specific state when the submenu item is expanded and visible to the user. When a submenu is opened, it reveals a list of submenu items, and each of these items represents a specific option related to the main menu item.
- Submenu Container allows you to add any widget in the corresponding container and modify the styling and design according to your preferences (see Essential Widgets > Container). These steps help you create a mega menu that displays a large number of options and subcategories. It typically appears as a dropdown menu that expands horizontally or vertically, revealing multiple columns or panels of links and content.
- Icon allows you to add or change the icon next to the menu item that best suits your website design. To do so:
- Click Change Icon.
- Go to General Icons and select the corresponding icon from the list.
- Go to My Icons and select the corresponding icon from the list uploaded in Media> Vectors.
- Label - allows you to modify the name of the menu item. The label provides a brief description or name for the action or feature associated with the item.
💡 If you have questions or concerns, contact us directly via the Live Chat box in the lower right corner. Our Support Team will provide you with top-notch quality support 24/7.