Studio Editor: Adding and Managing New Menus
7 min read
Add menus to help visitors navigate your client's site and find the information they need. You can choose the menu type and items, and create dropdowns to display custom content.
Important:
This article refers to the new menu component in the Studio Editor, which is not yet available to all users. For steps on adding and managing previous menus, click here.
In this article, learn more about:
Adding a menu
Add a menu to the site to get started. We recommending adding a menu to the site header, but you can add as many as you need for your clients and their business.
Once you add the menu, choose the items you want it to display.
To add a menu:
- Click Add Elements on the left side of your editor.
- Select Menu & Search.
- Select the type you want (Horizontal, Vertical, or Hamburger).
- Click the menu and drag it to the desired position on the page.
- Add items to the new menu:
- Select the menu you just added.
- Click Manage Menu.
- Click + Add Item at the bottom.
- 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 content.
Managing menus on a site
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
Change a menu item's link
Rename a menu item
Remove / delete an item
Reorder menu items
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:
- 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.
- Use an existing menu item:
Changing the menu type
Use the Layout settings to choose the menu type you want - a navigation bar, or a hamburger menu.
To set the layout:
- Click the menu in your editor.
- Click the Layout icon .
- Select the menu type:
- Navigation bar: Menu items are displayed in a bar.
- Orientation: Choose whether the bar is horizontal or vertical.
- Hamburger: An icon is displayed. When site visitors click the icon, the menu opens.
- Navigation bar: Menu items are displayed in a 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.
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.
Choose which menu is displayed on a page
Save a new menu
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.
Did this help?
|