How to create and customize menus

Hey, it’s Ethan from the Wix Studio team.

Let’s take a look at how you create and customize navigation menus on Wix Studio.

Site menus are how visitors navigate and achieve their goals on a site.

On Studio, you can add multiple menus to one site for precise control.

You can also set up anchor menus within a page, add different menus per page, and even customize them for each breakpoint.

Let’s go!

To add a menu to a page, go to Menu & Search in the Add panel.

Here, we’ve got horizontal, vertical, anchor, and hamburger menus, and some others to choose from.

I’ll add this horizontal menu.

By default, I’ve only got one item in the menu—the home page.

To add other ones, I’ll go to Manage Menu and click Add Item.

This is where you can add what you need to your site menu.

You can choose your main site pages, add dynamic and App pages, links, submenu titles, or a mega menu.

For now, I’ll choose some of my main pages and hit Apply.

You can see they’re automatically added to the menu.

Okay.

You might’ve noticed my menu is too dark to read.

So let’s change the design.

With the menu selected, I can adjust it from the Inspector panel.

Here, I can design the full menu container or the menu items themselves.

I’ll adjust the items—and here I can change up how they look normally, what happens when you hover over one of them, and how it looks when you’re on a certain page.

I want these pages to come in a different order.

So, with the Manage Menu panel still open, I’ll grab to the left of the item I want to move and just drag to reorder.

If you want to rename a page, you can just double-click the menu item or click on the three dots and choose Rename.

To change where a page links to, you can click the three dots and hit Change link.

You’ll see there are a few different places where the item can link to; here, I chose Anchor.

When you’ve added the link, you can click Done.

There are a few things we can adjust from here.

Firstly, because we’re designing responsively, we can control how the menu adapts to smaller screen sizes.

We can add a side scroll or get the items to wrap to another line.

I'll just align the menu to the right for a second… there we go.

Then we can fine-tune the spacing and alignment, which direction the items are ordered, and control item padding.

Okay, cool. Main navigation is added, it’s looking good.

But there’s another layer of navigation we can add here: submenus.

They’re also known as dropdown menus, and they’re useful for setting up a hierarchy and making navigation smoother.

Let’s say I’ve got more items in my menu.

I’ll go back to the Manage Menu panel and add them in.

To create my submenu, I can drag an item below the one I want to use as the submenu title.

If I want to add more, I can keep dragging them underneath.

I can even make a third level—a sub-sub-menu—by dragging another item under the first submenu item.

Great.

Next, I can adjust the submenu layout.

I’ll open up the Menu Layout panel and go to the Submenu tab.

This is where I can control things like how the menu opens, columns and spacing, and alignment.

We can also design the submenu in a similar way to how we design a regular menu—from here in the Inspector.

You can design the menu container, and the items and their different states.

Here, for example, I added 40% opacity to the menu container so it will help it pop better while scrolling.

Okay.

This menu is ready to go on desktop.

Time to optimize it for lower breakpoints.

In this example, we see that the menu breaks to four rows in tablet.

If we want our menu to fit nicely while moving from breakpoints, we can go back to desktop mode and change the responsive behavior to fixed.

Then the menu will stay in fixed size and posture while moving breakpoints.

Great.

Now to the mobile breakpoint.

Most of the time, horizontal menus are too big for a mobile screen, so we’ll switch to a hamburger menu to save space.

So, let’s go to the layers panel and find our horizontal menu.

We’ll change the name to “desktop menu” and hide it at this breakpoint.

Then I’ll add in a hamburger menu and customize it.

The first thing is I’ll change the color and background so it doesn’t disappear when I press it.

When the hamburger menu opens, I can design the menu container and customize how the menu items look in both their regular and selected states.

Say I want to create a different menu for the mobile view.

For that, I would need to create a new designated menu.

I'll go to the "manage menu" panel, click on "manage site menus," create a new mobile menu, and remove the items I don't need.

That’s all finished!

Now I’ll go to preview and see how it looks across breakpoints.

So, we have the horizontal menu and dropdowns on desktop and tablet, and a hamburger menu on mobile.

Looking good!

That's all for now, for more tutorials like this and to discover what you can do on Wix Studio, check out our Academy.