top of page
Search

All About Wix Menus: A Step-by-Step Guide to Adding, Editing, and Designing Menus in Wix


Hi there! I’m Emily Thomas from The Wix Collective, and today I’m excited to walk you through everything you need to know about creating and customizing menus in the Wix Editor. Whether you’re building a brand-new site or tweaking an existing one, menus are key to guiding your visitors smoothly through your content. In this tutorial, I’ll show you how to add menus from scratch, adjust their content, design their look, and explore some advanced menu options—all with easy-to-follow steps and helpful screenshots.


ree

Getting Started: Adding a Menu in Wix

First things first, let’s add a menu to your Wix site.


  1. Go to the Wix Editor and delete any current menu you have on your page.

  2. Click on the

    Add Elements

    (+) button on the left side.

  3. Select

    Menu & Anchor

    from the list.

  4. Scroll to the top to view the themed menu options, including horizontal and vertical menus.

  5. Choose a

    horizontal menu

    by clicking on one of the options and placing it on your page.

Note: If you accidentally stay in preview mode or have a lightbox open, exit those to see your menu properly.


Understanding Menu Connection to Site Pages

Your menu will automatically sync with the pages you have in your Wix site menu layout. This means if you add or hide pages there, your menu updates accordingly.

  • To check this, go to your

    Site Menu

    in the editor.

  • If you add a new page and set it to

    show

    , it will appear in your menu.

  • If you hide a page, it will disappear from the menu automatically.

This is great for keeping your navigation consistent, but there’s also an option to create an independent menu, which I’ll explain later.


Managing and Customizing Your Menu Content

To fine-tune what’s shown and how your menu behaves, click on your menu and then select Manage Menu. Here’s what you can do:

  • Navigate

    : Shows the same list of pages linked to your menu.

  • Settings

    : Allows you to set the menu as

    advanced

    , disconnecting it from the site pages for custom control.

  • Layout

    : Choose how your menu items display.

Menu Layout Options

Under Layout, you have several choices:

  • Wrap

    : If you have many menu items, this stacks them in columns.

  • Scroll

    : Adds a scroll button to navigate through overflowing items.

  • Regular horizontal layout

    : Keeps all items in one row.

Personally, I recommend avoiding wrap or scroll if you can. If your menu items don’t fit, it’s a sign to simplify your menu or use dropdowns/subcategories instead.

You can also adjust the spacing between items, fill the menu width, shrink items, and align text left, center, or right. Padding adjustments are available too.


Creating and Designing Dropdown Menus

Dropdown menus help organize your navigation when you have related pages or policies to group under main headings.

  1. Click

    Manage Menu

    .

  2. Make sure the page you want as a dropdown item (like Privacy Policy) is set to

    show

    .

  3. Drag the page underneath the main menu item you want it to fall under (e.g., About).

  4. Click the three dots next to the page and select

    Subpage

    to nest it properly.


Now when you preview and hover over the main menu item, the dropdown appears underneath.



Adjusting Dropdown Layout

By default, dropdowns may open as wide columns, which might not suit your style. You can change this:

  1. Click on your menu and go to

    Layout

    .

  2. Select

    Dropdown

    .

  3. Change the style from

    Columns

    to

    Fly Out

    .

  4. Preview to see the dropdown neatly fly out below the main menu item.


Designing Your Menu

Once your menu structure is set, let’s customize how it looks to match your site’s style.

Select your menu and click Design or open the design customization panel. You’ll see different areas you can style:

  • Menu Container

    : Add background colors, borders, rounded corners, shadows, or padding.

  • Scroll Button

    (if used): Change background, border, and icon colors.

  • Menu Items

    : Style the individual links in different states.


Styling Menu Items

Menu items have three states you can style:

  • Regular

    : How menu items look normally.

  • Hover

    : How they look when a visitor hovers over them.

  • Current Page

    : How the active page's menu item looks.

You can add backgrounds, change text colors, add borders, round corners, and shadows. For example, you might set hover text to green and the current page text to copper to visually guide users.



Using Advanced Menus for Custom Navigation

Sometimes you want a menu that doesn’t follow your site’s page structure. For example, you might want to feature the Privacy Policy separately without it appearing in your main menu.

  1. Add a new menu element to your page.

  2. In the menu settings, click

    Set as Advanced

    .

  3. This disconnects the menu from your site pages and opens a pop-up where you can customize exactly which items appear.

  4. Drag items to reorder, create submenus, or remove pages.

You can add different types of menu items here, including:

  • Site pages

  • Links

  • Sections

  • Anchors

  • Dropdown titles

  • Mega menus (multi-level dropdowns)

This feature is powerful if you want full control over your navigation.


Exploring Different Menu Types in Wix

Wix offers several menu styles to fit your site’s design and user experience needs:

  • Horizontal Menus

    : The classic and most common menu style, usually at the top of your site.

  • Vertical Menus

    : Less common, but useful for sidebars or specific layouts.

  • Hamburger Menus

    : Collapsible menus often used on mobile or for minimalist headers.

Hamburger menus work great for mobile or if you want a pop-out menu for specific sections like services. However, I prefer keeping a horizontal menu at the top for desktop visitors as it clearly shows their navigation options.


Using In-Page Menus and Anchors for Section Navigation


In-page menus let users jump between sections on the same page, which is great for one-page websites or long scroll pages.

  1. Add an

    Anchor Menu

    from the Add Elements > Menu & Anchor section.

  2. Place it on your page, ideally on your homepage or the page with multiple sections.

  3. Link each menu item to specific sections or anchors on the page.


Anchors are markers you place on your page to link to. They can be positioned anywhere—even in the middle of a section or on top of other elements.

  1. Add an

    Anchor

    element and place it where you want users to jump to.

  2. Rename the anchor for clarity.

  3. Link your menu item to this anchor when managing the menu.

When visitors click the menu item, the page will smoothly scroll to the anchor point.


While anchors were more commonly used before Wix introduced sections, they still provide useful flexibility for linking to precise spots on your page.


Wrapping Up

Menus are a fundamental part of your Wix website’s navigation, and knowing how to add, customize, and design them will greatly improve your site’s usability. From simple horizontal menus linked to your site pages, to advanced custom menus, dropdowns, hamburger menus, and in-page navigation with anchors—Wix provides all the tools you need.


If you want a ready-made solution, I’ve created an easy-to-manipulate Wix template that you can find at wixcollective.com/templates. It’s designed to help you get started quickly and customize your menus exactly how you want.

If you have any questions or want more tips, feel free to reach out. Happy building!

Comentários

bottom of page