Studio Editor: Adding and Managing New Menus
Add our latest 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 dropdowns 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. For steps on managing the previous menu experience, please click here.
How do I know which menu I have?
You can check whether you have the new or old experience by clicking the menu in your editor and clicking the Layout icon
.
New menus:
The blue label says Menu.
The Layout panel displays the option to change the menu type (between navigation bar or hamburger).
Old menus:
The blue label specifies the type of menu element you have (e.g. Horizontal Menu).
The Layout panel does not display the option to change the menu type.
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.
To add a menu:
Click Add Elements
on the left side of your editor.
Select Menu & Search.
Select the menu type you want:
Horizontal Menus: These advanced menus offer tons of unique customization options. You can tailor them to your exact needs, adjusting the layout and design of every single area.
Vertical Menus: Vertically arranged menus that look great on the right or left sides of websites.
Hamburger Menus: Minimalist, space-saving menus where the menu items are only displayed when visitors click the menu icon. The menu has an open and closed state.
Click the menu and drag it to the desired position on the page.
Changed your mind about the menu layout (type)?
Don't worry - you can always change it later.
Adding menu items
Once you've added the menu, choose the items you want to display.
Select regular site pages, collections of app and CMS pages, or specific pages within a collection. You can also add dropdown containers and links to truly tailor the experience for your client's needs.
To add menu items:
Select the menu in your editor.
Click Manage Menu.
Click + Add Item at the bottom.
Select the item you want to add and set it up:
Site pages
Add pages you want to show on the menu. The panel lists regular site pages, pages from Wix apps installed on the site (e.g. a Wix Stores product page), and pages connected to collections in CMS.
Whenever you see '(Item)' written next to a page name, it means the item includes multiple pages (e.g. certain CMS and Wix app pages). For example, the Product page in Wix Stores may contain a page for each product.
You can choose to add all of the items (pages), or specific pages in the collection:
Add all pages:
Select the checkbox next to the relevant collection of pages.
Click Add to Menu.
Add specific pages:
Hover over the collection of pages and click Select items.
Select the pages you want to add from the list.
Click Add to Menu.
Learn more about linking your menu to dynamic CMS pages.
Link or anchor
You can add many kinds of links to the menu, such as links other websites, your client's contact details, etc. You can also link to an anchor you've added to a section or element.
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.
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:
Select the relevant menu in your editor.
Click Manage Menu.
Choose what to do next:
Add more menu items
Click + Add Item at the bottom and select the item you want to add:
Site pages: Add pages you want to show on the menu. The panel lists regular site pages, pages from apps (e.g. a Wix Stores product page), and pages connected to collections in CMS. You can also add specific pages from page collections.
Link or anchor: You can add many kinds of links to the menu, such as external links to other websites, documents, etc. You can also link to an anchor you've added to a section or element.
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.
Change a menu item's link
Hover over the relevant item and click the More Actions icon
.
Click Change Link.
Change the link type and / or its details.
Click Done.
Tip: You can also click Remove Link to delete a link from a menu item.
Rename a menu item
Hover over the relevant item and click the More Actions icon
.
Click Rename.
Enter the new name.
Press the Enter key on your keyboard to save your changes.
Remove or delete an item
Depending on the item type, you may see the option to remove it from the menu, or delete it completely.
Removing items: These are items that exist regardless of the menu, like site pages and lightboxes. Removing these items means they're no longer displayed in the menu, but have not been deleted from the site.
Hover over the relevant item and click the More Actions icon
.
Click Remove from menu.
Deleting items: These are items that only exist within the menu, and not as separate elements (e.g. dropdowns). When you delete these items, they're gone from the site.
Hover over the relevant item and click the More Actions icon
.
Click Delete.
Note: If you delete a dropdown, any pages you have added to it are removed from the menu. However, you can always re-add them as needed.
Reorder menu items
Hold the Reorder icon
next to an item and drag it to the desired position.
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.
Tip:
Dropdowns were called mega menus in the previous menu experience.
To add and set up a dropdown:
Select the relevant menu in the editor.
Click Manage Menu.
Choose what you want to do:
Use an existing menu item:
Drag a menu item to move it below the item you want as the dropdown title.
Hover over the same item and click the More Actions icon
.
Select Move under "Page Name".
Repeat steps a - c for all other items.
Create a new dropdown:
Click + Add Item.
Select Dropdown.
Enter the title for the dropdown.
Press the Enter key on your keyboard to save your changes.
Drag and drop menu items under the dropdown to add them.
Repeat step e for all other items you want to add.
Learn more about working with dropdowns
Switching the menu to a different type
Change the menu's layout for each breakpoint on the site. You can select a horizontal or vertical navigation bar, or a hamburger menu.
To set the menu type and layout:
Click the relevant breakpoint at the top of the editor.
Click the menu.
Click the Layout icon
.
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.
Adjust the layout settings for your menu type.
Repeat steps 2-6 for each breakpoint.
Need more info?
Learn more about adjusting the layout of menus.
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.
Click below to learn how to:
Choose which menu is displayed on a page
Select the relevant menu.
Click Manage Menu.
Click the drop-down under Which menu is displayed?.
Depending on the menu you need, follow the steps:
Existing menu: Select the menu from the list.
New menu:
Click Manage Site Menus.
Click + Add New Menu at the bottom.
Enter a name for the new menu.
Note: This name isn't visible to visitors.
Save a new menu
Select the relevant menu.
Click Manage Menu.
Click the drop-down under Which menu is displayed?.
Select Manage Site Menus.
Click + Add New Menu at the bottom.
Enter a name for the new menu. This name isn't visible to visitors.
Start adding pages to the menu:
Select the new menu you just created.
Click the Exit icon
at the top right.
Click + Add new Item to add pages, links, dropdowns, etc.
Display different menu items on different breakpoints
You can use separate menu elements if you want to show a completely different menu on each breakpoint. After adding the new menu element, hide the other menu from the breakpoint you're working on.
Go to the breakpoint you want to have a unique menu.
Add a new menu element.
Click Manage Menu on the new menu element.
Choose what menu items to display under Which menu is displayed?.
Hide the other menu from this breakpoint:
Right-click the menu element that you want to hide.
Select Hide.
Want to improve accessibility?
Open the Settings panel
to add an accessible name to your menu. Accessible names are short titles (usually 1-3 words) that describe an element's function and content to assistive technologies.