Studio Editor: Adding and Managing Menus
7 min read
Add menus to help visitors find their way around the site. These menus are fully customizable, showing any link your client wants – site pages, external websites, or even their phone number.
You should know:
This article refers to the old menu flow. We have recently started the release a new menu component, which affects horizontal, vertical, and hamburger menus. For steps on adding and setting up new menus, please click here.
In this article, learn how to:
Adding a menu
Add as many menu elements as you need to your client's site. Choose the right type of menu for your design, then decide which items it should show.
To add a menu:
- Click Add Elements
on the left side of the Editor. - Click Menu & Search.
- Drag the relevant menu design onto the page:
- 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.
- Anchor Menus: Floating vertical menu that displays anchor links. This helps visitors navigate between the different sections on a page, especially if it's a long page or a one-page site.
- 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.
- 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
- Dynamic and app pages
- Link: You can add many kinds of links to the menu. Link to other websites, anchors on this site, your client's contact details, etc.
- Submenu title: This adds a non-clickable title to the menu, under which you can nest pages in a submenu.
- Mega menu: This is a full-screen container that appears below the menu when visitors hover over the item. You can design this container to show any kind of content.
Looking for pages related to Wix apps?
Add a new Link to the menu and select Page on the left. Clicking the drop-down, you'll see a list of all the pages related to Wix apps (e.g. Wix Stores, Wix Bookings).
Managing an existing menu
You can always adjust an existing menu and the items it shows. Add more items, remove ones that are irrelevant or change their order to keep the menu fresh.
To manage a menu:
- Select the relevant menu in the Editor.
- Click Manage Menu.
- Choose what to do next:
Add more menu items
Change a menu item's link
.Rename a menu item
Remove a menu item
Reorder menu items
next to an item and drag it to the desired position.
Creating drop-down submenus
There are 2 ways to create a new submenu, 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 submenu when visitors hover over it.
- A title that is not clickable: Add a Submenu title that does not lead to any page. Visitors hover over it to see the submenu.
To move items under a new submenu:
- Select the relevant menu in the Editor.
- Click Manage Menu.
- (Optional) Add a non-clickable title for the submenu:
- Click + Add Item.
- Select Submenu title.
- Enter the new title for the submenu.
- Press the Enter key on your keyboard to save your changes.
- Move menu items to the submenu:
- Drag a menu item to move it below the submenu title.
Tip: The submenu title is either another menu item, or the non-clickable title you added. - Hover over the same item and click the More Actions icon
. - Select Move under "Page Name".
- Repeat step a - c for all other submenu items.
- Drag a menu item to move it below the submenu title.
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
Save a new menu
at the top right.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?
|