Navigation Menu Widget
Add and edit the Navigation Menu widget
If you want visitors to enjoy your website and its content to the full, you need to ensure its navigation is convenient. Along with other design features, navigation is what defines your site’s usability. As long as browsing your website is easy and intuitive, visitors will be able to find the required information quickly and effortlessly.
Boxmode offers a dedicated Navigation Menu widget that allows you to set up and customize a navigation tab that matches your overall website design and ensures the perfect user experience.
Adding a Navigation Menu
To add the Navigation Menu widget to your page:
- Click the “+” icon in the left sidebar when in the editor;
- Select “Navigation menu” in the list of the available widget categories;
- Choose a “Horizontal” or “Vertical” layout and pick one of the widget templates;
- To add the widget, simply drag it to the canvas (the widget selection menu will automatically disappear) and drop it wherever you need it (the drop area will be highlighted).
Note: To cancel the process, press “Esc” on your keyboard while dragging the widget.
The default number of items (tabs) in the navigation menu will correspond to the current number of pages on your website.
Moving the Widget
To move the widget to a different area of the page, click on the widget to call out its controls. Click and hold the “crossed arrows” icon and drag the widget to any other location on the page. The drop area will be highlighted on the canvas.
Resizing the Widget
To resize the widget, simply highlight it and drag one of its anchor points up/down or left/right until you get the desired result. You can also adjust the widget’s padding in the similar way. Hover your cursor over the area around the anchor point (it will become highlighted as a half circle) and drag it up/down or left/right, accordingly.
Editing the Widget
To start editing your navigation menu, click on the widget to call out its controls. Then hit the “Edit” button to open the editing menu.
The widget editing menu consists of several tabs, allowing you to customize your navigation menu in and out.
Set up your menu items and add new ones.
When hovering your cursor over an item in the list, the “Settings” icon will appear. Click it to call out a contextual menu.
To open the editing menu of the selected item, click “Settings”.
In this menu, you can rename the item and set the page or URL to which the user will be redirected once the item is clicked. There are two link options available: “To URL” or “Jump to page”.
If “To URL” is selected, a field appears in which you can insert the link.
If you select “Jump to page”, a dropdown list will appear, allowing you to select the specific page of your website to which the user will be redirected.
Additional options in the contextual menu
You may choose to hide a menu item by clicking “Hide from menu”.
Clicking “Duplicate” creates a copy of the selected item with the name “<Item> – copy”.
Clicking “Delete” removes the item from the menu.
Select your preferred navigation menu design.
Configure the widget paddings and adjust the spacing between the navigation menu tabs.
Adjust the text size for all menu items, change fonts, format, color, and text alignment. You can also configure the widget border and change the color of the widget’s background.
Deleting the Widget
To delete the navigation menu from the canvas, click on the widget to call out its controls and hit the “Trash bin” icon.
Theory is good, but practice is better!