Custom menus.

Learn how to create and manage multiple custom menus on every site, and design them per breakpoint. Optimize your site navigation with custom menus on Editor X.

Learn how to create and manage multiple custom menus on every site, and design them per breakpoint. Optimize your site navigation with custom menus on Editor X.

Let’s explore how to use custom menus on Editor X.


We’ll review how to set up a site menu, how to design it per breakpoint and how to add additional custom menus for specific site pages.


The site we’ll be working on has 5 pages. Let’s start by setting up this main menu.


When starting with a blank canvas, you’ll find a menu component in the right corner of the header, with a “Home” item by default. Go to Manage Menu to set up and manage the menu data.


Select Show Pages to choose which pages you want displayed on your menu. Here you’ll find a list of the existing pages on the site. Select the pages you want to show, then click Apply


They'll now appear as items on your menu.


Click the 3 dots next to each item to change the link, rename the page it belongs to, remove it from the menu, and manage the page settings.


Use these 4 dots on the left to grab an item and drag to rearrange the order.


You can select the Link icon to add new menu items that link to other destinations like a web address, page, document, and email.


To create a dropdown, use this icon. Once you select it, an unclickable item will be added to your menu.


Go to Show Pages and select the pages you want to add to the dropdown.


Now you can select ‘Move to Dropdown’ or drag items underneath it to the right.


Let’s take a look.


Now let’s rename this menu to stay organized. From the dropdown, go to Manage All Menus. Here you can rename, duplicate, or delete if it’s not in use. Let’s rename it as Main Menu.


From the floating action bar under Design, you can edit the color, corners, shadow effect, text and spacing of this menu. Let’s change the text color to pink.


Cascading rules apply here, so these style changes will be reflected on smaller breakpoints.


On the mobile viewport, you’ll find a hamburger menu in the top right corner by default. In the Layers panel, you’ll see the previous horizontal menu component is hidden for you automatically. Make sure you don’t delete it, as it will remove the menu from your entire site.


To set up the hamburger menu, go to Open Menu, select the container with your items, and click Manage Menu. As you can see, it automatically displays the data from the main menu we created earlier.


Use the floating action bar to customize the menu layout, design and behavior. Let’s adjust the spacing here.


To design this wider menu container, select it and click Design to choose the fill color and opacity. Use this bar to change the color and opacity of the site while the menu is open. This would also be a great place to add elements like social icons and a logo.


Under Animation, you can choose the effect you want to add to your hamburger icon when it appears on the screen.


Let’s head back to desktop. This Projects page has a lot going on, so we’ll add an additional custom menu for easier navigation through the sections.


For this menu, we’ll link to anchors and external links. From this floating action bar, you can set any element as an anchor. We've already set the rest of the anchors, let's just add this last one.


From the Add panel, under Menu, you’ll find 4 different types of menu components: horizontal, vertical, hamburger and anchor. Select a type, choose one of the suggested designs on the right, and drag into place.


As with the hamburger component, this new menu also displays the original menu data by default. To change this, go to Manage Menu, from the dropdown go to Manage All Menus and click Add New Menu. Here, you can add a new menu and set up its data.


Click the Link icon at the bottom, and select Anchor to choose exactly which ones you want to add. Don’t forget to rename the item each time you add it to the menu.


You will only be able to remove the "Home" item once you’ve added more items to your menu.


Once you’ve customized your menu design, use the Inspector panel on the right to make this menu Fixed so that it always shows as you scroll the page.


So there are now 2 separate menu components on the same page, each with their own distinct data, links and design.


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

NEXT VIDEOS

Video tutorial about saving and reusing designs using Masters

Learn how to make a section a Master to save & reuse your designs.

Play icon
Video about how to create, manage and share design libraries on Editor X

Learn how to create, manage and share design libraries with your team.

Play icon
Video about how to set up a team account on Editor X.

Learn how to set up a team account.

Play icon
Video about how to assign and manage Roles & Permissions on Editor X.

Discover how to assign and manage roles & permissions.

Play icon

Did you find this resource helpful?

Thank you for your feedback!

Related learning resources.

Thumbnail indicating custom menus. Purple background with a purple box over it and a white icon in the middle.

LESSONS & EXERCISES

Custom Menus

Find out how to add menu components, manage custom menus and more.

LESSONS & EXERCISES

Title

Learn how to work with sections—the building blocks of your site.

Start Lesson

VIDEO LIBRARY

Title

Get to know where you control size, position and behavior of all elements.

Watch Now

LESSONS & EXERCISES

Title

Learn how to take precise control over the positioning of elements using grid.

Start Lesson

Ready to start creating?

Search icon
Home icon
LESSONS & EXERCISES
Arrow down icon
Editor X Essentials
Arrow down icon
Design & Layouting
Arrow down icon
Interactions & Effects
Arrow down icon
Elements & Components
Arrow down icon
Web Concepts
Arrow down icon
Content Management
Arrow down icon
Collaboration
Arrow down icon
VIDEO LIBRARY
Arrow down icon
External link icon
External link icon
ACADEMY MENU ▶
Search icon

Top searches

People are searching for

Video tutorial introducing the Editor X workspace with an overview of the responsive layouting and design tools.

VIDEO LIBRARY

Introducing Editor X

Discover the Editor X workspace. Get an introduction to your advanced layouting tools and an overview of responsive web design features like breakpoints, flexbox and CSS grid.

Video introducing the Editor X workspace with an overview of the responsive layouting tools and design capabilities.

VIDEO LIBRARY

Getting Started

Learn the basics of creating a site on Editor X. Get a step by step walkthrough covering the key features and capabilities.

Thumbnail indicating interactions. Orange background with a shaded orange container over it. In the middle of the container is a white logo.

LESSONS & EXERCISES

Hover Interactions

Design dynamic web experiences by adding a variety of interactions to any element on hover. Customize the interaction settings for every breakpoint, from transform adjustment to advanced design capabilities and timing control.