Studio Editor: Adding and Managing New Menus

8 min read
In this article
  • Adding a menu
  • Managing menu items
  • Creating dropdowns
  • Switching the menu to a different layout
  • Displaying multiple menus on the same site
Add our new menu element to streamline your site-building process while enhancing navigation for your client's visitors. Choose the best layout for each breakpoint – horizontal, vertical or a hamburger menu. Switching between layouts is straightforward, so you can adjust on the fly as your design evolves.
Manage the menu items as needed by adding, removing and reordering the items. You can use dropdown containers to display submenus with your own content, giving you the ability to create a tailored experience that fits your client's needs.
Important:
This article refers to the new menu element in the Studio Editor, which is not yet available to all users. For steps on adding and managing previous menus, click here.

Adding a menu

Add a menu to the site to get started. We recommend adding a menu to the site header, but you can add and set up as many as you need to tailor the experience for different pages and sections.
Once you add the menu, choose the items you want it to display (e.g. site pages, links, etc).

To add a menu:

  1. Click Add Elements  on the left side of your editor.
  2. Select Menu & Search
  3. Select the menu type you want (Horizontal, Vertical, or Hamburger). 
  4. Click the menu and drag it to the desired position on the page.
  5. Add items to the new menu:
    1. Select the menu you just added. 
    2. Click Manage Menu.
    3. Click + Add Item at the bottom.
    4. Select the item you want to add: 
      • Main pages: Add a regular site page to the menu.
      • Dynamic and app pages: Add pages from apps (e.g. a Wix Stores product page), or pages connected to collections in CMS.
      • Link: You can add many kinds of links to the menu, such as links other websites, anchors on site pages, your client's contact details, etc. 
      • Dropdown: Add a container that appears below the menu when visitors hover over the item. You can design it as needed, and use it to display menu items and additional content. 
Changed your mind about the menu layout (type)?
Don't worry - you can always change it later.
The add elements panel is open. The cursor is adding a horizontal menu to the site.

Managing menu items

You can always adjust an existing menu and the items it shows. Add more items, remove ones that are irrelevant, or change the order to keep the content fresh. 

To manage a menu:

  1. Select the relevant menu in your editor. 
  2. Click Manage Menu.
  3. Choose what to do next:
The manage menu panel is open. The cursor is clicking to rename an item.

Creating dropdowns

There are 2 ways to create dropdowns in a menu, depending on what you want the title to be:
  • An existing menu item: Decide on an existing item (page or link) from the menu to show the dropdown when visitors hover over it. 
  • A title that is not clickable: Add a dropdown title that does not lead to any page. When visitors hover over it, the dropdown container opens. 

To add and set up a dropdown:

  1. Select the relevant menu in the editor.
  2. Click Manage Menu.
  3. Choose what you want to do:
    • Use an existing menu item:
      1. Drag a menu item to move it below the item you want as the dropdown title.
      2. Hover over the same item and click the More Actions icon 
      3. Select Move under "Page Name".
      4. Repeat steps a - c for all other items.
    • Create a new dropdown:
      1. Click + Add Item.
      2. Select Dropdown.
      3. Enter the title for the dropdown. 
      4. Press the Enter key on your keyboard to save your changes.
      5. Drag and drop menu items under the dropdown to add them.
      6. Repeat step e for all other items you want to add.
A dropdown has been created in the manage menu panel. A menu item is being dragged under it.

Switching the menu to a different layout

Use the layout settings to choose the menu type you want - a horizontal or vertical navigation bar, or a hamburger menu.

To set the layout:

  1. Click the menu in your editor.
  2. Click the Layout icon .
  3. Select the menu type:
    • Navigation bar: Menu items are displayed in a bar. Under Orientation, choose whether the bar is horizontal or vertical.
    • Hamburger: An icon is displayed. When site visitors click the icon, the menu opens.
The menu layout panel. The cursor has selected Navigation bar.

Displaying multiple menus on the same site

You can create as many menus as you need and show completely different items in each. 
After adding a new menu element, you can choose which menu it should display: An existing menu that you saved, or a new one that you create on the spot. This means you can save menus and reuse them on various menu elements across the site. 
Showing the same item on multiple menus?
You can give the item a unique name on each menu so it always match the specific intent. All the menus that you create are completely independent of one another.
Click below to learn how to: