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.

Adding Navigation Menu

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.

Moving widget

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. 

Resizing widget

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.

Editing widget

The widget editing menu consists of several tabs, allowing you to customize your navigation menu in and out. 

Manage items

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.

Manage items

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”.

Redirect

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.

Jump to page

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.

Delete item

Templates

Select your preferred navigation menu design.

Templates

Layout

Configure the widget paddings and adjust the spacing between the navigation menu tabs.

Layout

Design

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.

Design

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!

This form is for reporting instances of copyright infringement only. If you believe that your own copyrighted work is accessible on Boxmode in violation of your copyright, please fill in the following information, carefully read the statement below, and submit the form. To submit a valid Notification of Alleged Copyright Infringement, the information you provide...