Elements & Components

Custom menus.

You can create and manage multiple menus on every site. For example, you might have a main site menu for page navigation, and a different menu that links to each section or page of a portfolio.

Adding menu components.

Find menu components in the Add panel, under Menu. Choose from horizontal, vertical or hamburger styles.

The Add panel is open and the MENU tab is selected. In the MENUS section, Horizontal Menus is highlighted to show menu options.

Choosing pages to show.

The first menu component you drag onto your site will have just one item by default: Home. Open the Manage Menu panel to set up your menu data. First, from Show Pages at the bottom of the panel, choose which pages you want it to display.

The menu component is selected to show the floating action bar. Manage Menu is selected to show the Manage Menu panel.

Item names & links.

From the 3 dots beside an item you can rename it and add links to pages, anchors, external sites and more.

The Manage Menu panel is open and the 3 dots beside HOME are selected to show Change Link, Rename and Page Settings.

Adding new items.

To create new items and links for your menu, click the Link Items icon at the bottom of the panel, add your link, then name your new item.

The Manage Menu panel is open and the cursor is hovering over the Link Items button.

Adding multiple menus.

To add another menu to your site, first drag in a new menu component from the Add panel. Your new menu will automatically show all the data from your first menu. If you want your new menu to display different data, select it and click Manage Menu. From the dropdown under Choose a menu to display, you’ll see your first menu there already. Now click Manage All Menus, then Add New Menu. From here, you can rename your menu and set up its data.

The Manage Menu panel is open. Under Choose a menu to display, New Menu is highlighted and the cursor is hovering over Manage All Menus.

Clickable dropdowns.

You can turn any menu item into a subitem. Select the menu component you want, open the Manage Menu panel, click the 3 dots beside an item, then choose Move to Dropdown. This item will now be revealed when you click on its parent item in your menu.

The Manage Menu panel is open, showing the options for each specific menu component. Move to Dropdown is highlighted by the cursor.

Non-clickable dropdowns.

To create a dropdown menu that opens on hover, click the icon in the bottom right of the Manage Menu panel. Next, name your non-clickable dropdown heading and drag any subitems underneath it.

The Manage Menu panel is open, a new dropdown menu is created and ready to be named.

Styling per breakpoint.

You can change the color or size of your menu component at each breakpoint.


Note: Any style changes automatically cascade down to smaller breakpoints.

The Inspector panel is open on sizing options, showing the width and height of the selected menu component.

New menu per breakpoint.

If you want to show a different menu component at a different breakpoint, you’ll need to hide the existing component and add a new one. For example, you might want your main menu to be horizontal on desktop, but hamburger style on tablet. In this case, go to the tablet breakpoint, right click the horizontal menu component and select Don’t Display. Next, drag in a hamburger menu. The hamburger menu will have all the same data as the horizontal one, but if you want, you can customize it from the Manage Menu panel.

The menu component is selected and Don’t Display is highlighted within the right click options panel.

Intro

Anchor

TRY IT YOURSELF

Exercise on custom menus.

Open Academy X from desktop to complete this exercise.

{No.}

{Exercise Description}

Open advanced exercise on the editor →

{No.}

{Exercise Description}

Open Academy X from desktop to complete this exercise.

Did you find this resource helpful?

Yes thanks
Not really
Submit Feedback

Thank you for your feedback!

Next lessons.

VIDEO LIBRARY

Title

Learn how to add new sections, rearrange them & flip them to vertical.

Start lesson

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.

Start lesson

LESSONS & EXERCISES

Title

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

Start lesson

Related learning resources.

VIDEO LIBRARY

Title

Learn how to add new sections, rearrange them & flip them to vertical.

Watch Now

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
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
Collaboration
Arrow down icon
External link icon
External link 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.

ACADEMY MENU ▶
Search icon