Custom menus

Let’s take a look at how to create and customize site menus on Editor X.

Site menus are a crucial part of helping users navigate and accomplish what they set out to do on a site. On Editor X you have the ability to add multiple menus to one site for granular control over the navigation. You can have anchor menus within a page, different menus per page, different menus per breakpoint and more.

In this video, we’ll explore how to set up and manage site menus, and customize them at each breakpoint to create the best navigation experience for every screen size.

Let’s get started.

In the editor, you can add menus from the add panel under menu & search. Here, you can choose from horizontal and vertical menus, styled menus, anchor or hamburger menus.

We’ll go with a styled horizontal menu, and place it on the canvas.

By default the menu has a home item. To choose additional pages to display in the menu, go to manage menu.

Click add new item. From here, you can choose to add site pages, links or a submenu title.

We’ll select site pages and choose some of our existing pages to add to the menu. Once we mark them and hit apply, they’ll appear in the menu on the canvas.

To reorder our menu items, we can click to the left of the one we want to move and drag it to where we want it.

If you want to change the link, click the 3 dots next to an item. You can choose from the link options here.

You can also rename a page, remove it from the menu, manage page settings or move a page to a submenu.

Submenus, also called dropdown menus, are used to organize menu items and make navigation smoother.

To create a submenu, drag the relevant page below the main item you want it to appear under. Choose move to submenu. Then, to add any more submenu pages, drag them under the one you just added.

You can also add a submenu title to create a non-clickable menu item that shows submenu items on hover.

You can add items to this submenu title the same way as before—drag a page underneath the main title and choose move to submenu.

We set up the menu, so now we can adjust its design and properties. For example, we’ll adjust the width.

With the styled horizontal menu, we have advanced design and layout options. We’ll start with the menu layout options here.

Since the viewport is responsive, here we can select how the menu looks if either the container or the viewport are too narrow to display all of the items. For example, this can happen if the menu container’s width is set to fixed units like pixels. If the container and viewport are wide enough to display all the items, you won’t see them wrapping or scrolling. From here we can also set item’s spacing and alignment, and item padding.

Under the submenu tab we can adjust the submenu layout properties, like how the submenu opens, the alignment of items and their spacing.

Let’s customize the design of this menu from the design tab in the inspector panel. We can change these design options for the menu container, or choose different menu components to edit. We’ll select menu items. We can design menu items for each state; regular–for when visitors are not interacting with an item–hover, and current page–which indicates which page visitors are on.

Adjusting the design of our menu items for each state gives site visitors a more interactive navigation experience. Let’s start with the regular state and adjust the font. And for both hover and the current page, let’s change the text colors. Note that the design options may change depending on the the menu type you’re editing.

In this example we can also design the submenu container and submenu items. Just like with menu items, we can adjust submenu items in all 3 states. If your site has multiple submenus, the design will be the same for all of them.

Now let’s optimize the menu for each breakpoint, starting with tablet.

Sometimes we might want to add or remove a few items from the menu at this breakpoint. But if we delete one here, as you can see it’s also deleted from all other breakpoints.

We need to create a separate menu for the tablet breakpoint so we don’t affect the desktop one. On Editor X, you can create multiple menus with different items on each one.

Let’s see how to add another menu. We’ll start by renaming our desktop menu. Because we want the tablet menu to keep the same design, we’ll duplicate it and rename it as well. Then, we set the tablet menu to don’t display on desktop.

And on the tablet breakpoint, we’ll display the tablet menu and hide the desktop one.

It’s important that we don’t delete the desktop menu entirely, or it will be deleted on all breakpoints.

Now we can edit the tablet menu by choosing manage site menus. We’ll add a new one and name it tablet menu. We can choose which pages we want to display and set submenus the same way as before.

Now we have separate menus for tablet and desktop.

On mobile, we’ll replace the horizontal menu with a hamburger menu. Again, we’ll hide the tablet menu at this breakpoint. Then, drag in a hamburger menu from the add panel.

Now we can choose which menu we want to display. We’ll expand the menu, select this vertical one that appears and go to manage menu. You can display an existing menu if it fits—for example, we’ll use our existing desktop menu here. Or, you can create a new one for this breakpoint.

Let’s preview the site, and see how the menus look at each breakpoint. On desktop, you can see that we have a menu with four items, and two dropdown menus when we hover. The menu items change on tablet, and on mobile we switch to a hamburger menu.

Editor X is an advanced creation platform. To master it, continue watching this series of video tutorials.