Navigation is one of the design features that define your site’s usability. Therefore, you must ensure users can easily find needed sections or pages to enjoy your website and its content to the full.   

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. You can read about widgets, their purpose, and Boxmode widgets’ general settings (how to add, move, resize, and delete them) in our Widgets Overview article.

Editing the widget

To start editing the Navigation Menu widget, click on it to call out its controls. The widget editing menu contains four controls: Design (the brush icon), Layout, Settings, and Template. They allow you to customize the widget in multiple ways.

Design

Here, you can 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. Please find more information on organizing content separately using a header in our Header Widget article. 

Layout

The layout control is for configuring the widget paddings and adjusting the spacing between the navigation menu tabs.

Settings: Manage items

This control is for managing menu items (e.g., Homepage, About, Contacts) and adding new ones.

Note:

The Navigation Menu widget helps to synchronize all created pages with the website structure automatically. But if you add a new page later, you’ll need to manually create an item in the Navigation Menu and set the appropriate redirects, including custom ones. That’s why we advise you to add the widget after adding all the necessary pages.

Click on the ellipsis icon next to the item you want to modify, and another contextual menu with four tabs (Settings, Hide from menu, Duplicate, and Delete) will appear. 

Settings

Name. In this menu, you can change an item name. 

Action Type. Here, you can set a page or URL to redirect the user once they click the item. Two link options are available:

  • To URL: The tab opens a field where you can insert the link.
  • Jump to page: The tab that opens a dropdown menu where you can select the specific page of your website which will redirect the user.

Open in new tab. This toggle switch is for setting a specific page to be opened in a new tab. 

Hide item from menu. By switching this toggle on, you can hide an item from a navigation menu on a homepage. 

Hide from menu

This tab also allows for hiding a navigation menu item. 

Duplicate

By pressing the Duplicate tab, you can create a copy of the selected item with the name “<Item> – copy”.

Delete

This tab removes the item from the navigation menu.

Templates

Here, you can select your preferred Navigation Menu design. Templates for the vertical and horizontal menu are available, so choose the one that suits your website best. Configure the widget paddings and adjust the spacing between the navigation menu tabs.

If you need to structure your website on multiple levels, please use the subpages’ functionality. You can find more details on how to do this in our Help Center article.

We hope this guide helped you understand how the Navigation Menu widget works. Now, it’s time for you to try it yourself.

Go to Editor