How to create menus in wordpress

New Page

How to Add a Navigation Menu in WordPress (Beginner’s Guide)

Last Updated On May 18, 2022 By Editorial Team | Reader Disclosure Disclosure : Our content is endorsed by the reader. This means that if you click on some of our links, we may earn a commission. See how WPBeginner is funded, why it’s important, and how you can support us.

Share 484 Share Tweet Share Facebook Messenger WhatsApp Email

Do you want to add a navigation menu to your WordPress site?

WordPress comes with a drag and drop menu interface that you can use to create header menus, dropdown menus and more.

In this step-by-step guide, we will show you how to easily add a navigation menu in WordPress.

How to Add Navigation Menu in WordPress How to Add a Navigation Menu in WordPress

What is a navigation menu?

A navigation menu is a list of links that point to important areas of a website. Pour le general, they are presented as a horizontal bar of links at the top of every page on a WordPress website.

Navigation menus give your site structure and help visitors find what they’re looking for. This is what the navigation menu in WPBeginner looks like:

Exemple de menu de navigation de WPBeginner Example de menu de navigation WPBeginner

WordPress a ce la mer peut easily regrouper des menus et des sous-menus. You can add links to your top pages, categories or topics, WordPress blog posts, and even custom links, like your social media profile.

The exact location of your menu depends on your WordPress theme. Most themes will have multiple options, so you can create different menus that can be displayed in different places.

For example, most WordPress themes come with a main menu that appears at the top. Some themes may include a secondary menu, a footer menu, or a mobile navigation menu as well.

Ceci étant, let’s see how you can create a custom navigation menu in WordPress.

Video tutorial

Subscribe to WPBeginner

If you prefer written instructions, read on

Creation of the main personalized navigation menu

To create a navigation menu, you need to visit the Appearance » Menus page in your WordPress admin panel.

Nota : si no ve la opción ‘Apariencia » Menús’ en su sitio y solo ve ‘Apariencia » Editor (Beta)’, eso significa que su tema tiene habilitada la Edición completa del sitio (FSE). Puede hacer clic aquí para saltar a la sección FSE a continuación .

Create a new menu Create a new menu

First, you need to provide a name for your menu, like ‘Top Navigation Menu’, and then click the ‘Create Menu’ button.

This will expand the menu area, and it will look like this:

Received menu created on WordPress Newly created menu in WordPress

Next, you can choose the pages you want to add to the menu. You can either automatically add all new top-level pages, or you can select specific pages from the left column.

First, click the ‘View All’ tab to see all your site’s pages. After that click the box next to each of the pages you want to add to your menu, and then click on the ‘Add to Menu’ button.

Add pages to your menu Add pages to your menu

Once your pages have been added, you can move them around by dragging and dropping them.

This way you can change their order and rearrange them.

Faites glisser et déposez des pages dans le menu Faites glisser et déposez des pages dans le menu

Note: All menus have their items listed in a vertical (top to bottom) list in the menu editor. When you put the menu live on your site, it’ll either display vertically or horizontally (left to right), depending on the location you select.

Most themes have several different locations where you can put menus. In this example, we’re using the Astra theme, which has 5 different locations.

After adding pages to the menu, select the location where you want to display the menu and click on the ‘Save Menu’ button.

Select menu location Select menu location

Tip: If you’re not sure where each location is, try saving the menu in different places, then visit your site to see how it looks. You probably won’t want to use all the locations, but you might want to use more than one.

Here’s our finished menu on the site:

Menu preview Menu preview

Creating Drop-Down Menus in WordPress

Drop-down menus sometimes called nested menus, are navigation menus with parent and child menu items. When you run your cursor over a parent item, all the child items will appear beneath it in a sub-menu.

To create a submenu, drag an item below the parent item, and then drag it slightly to the right. We’ve done that with 3 sub-items beneath ‘Services’ in our menu:

Creating a submenu Creating a submenu

You can even add multiple layers of dropdowns so that your sub-menu can have a sub-menu. This can end up looking a bit cluttered, and many themes do not support multi-layer drop-down menus.

Here’s the sub-menu live on our demo site:

Submenu preview in WordPress Submenu preview in WordPress

Adding Categories to WordPress Menus

If you’re using WordPress to run a blog, then you may want to add your blog categories as a drop-down in your WordPress menu.

We do this on WPBeginner and have multiple categories like news, themes, tutorials, and more.

Category menu on WPBeginner Category menu on WPBeginner

You can easily add categories to your menu by clicking the Categories tab on the left side of the menus screen. You may also need to click the ‘View All’ tab to see all your categories.

Simply select the categories you want to add to the menu, and then click the ‘Add to Menu’ button.

Select categories to add Select categories to add

The categories will appear as regular menu items at the bottom of your menu.

Next, you can drag and drop them into position. For example, we’re going to put all of these categories under the Blog menu item.

Drag the categories under the main menu Drag the categories under the main menu

Do you want to have a blog page on your site that’s separate from your homepage? If so, check out our tutorial on how to create a separate page for blog posts in WordPress.

Here’s how different categories appear in the navigational menu on our demo site:

Blog categories in navigational menu Blog categories in navigational menu

Adding Custom Links to Your WordPress Navigation Menus

Aside from categories and pages, WordPress also makes it super easy to add custom links to your menu. You can use it to link to your social media profiles, your online store, and other websites that you own.

You will need to use the ‘Custom Links’ tab on the Menu screen. Simply add the link along with the text you want to use in your menu and click the ‘Add to Menu’ button.

Add a custom link Add a custom link

You can even get creative and add social media icons in your menu or a call to action buttons to get more conversions.

Editing or Removing a Menu Item in WordPress Navigation Menus

When you add pages or categories to your custom navigation menu, WordPress uses the page title or category name as the link text. You can change this if you want.

Any menu item can be edited by clicking on the downward arrow next to it.

Edit or remove menu item Edit or remove menu item

You can change the name of the menu item here. This is also where you can click ‘Remove’ to take the link off your menu altogether.

If you’re struggling with the drag and drop interface, then you can also move the menu item around by clicking the appropriate ‘Move’ link.

Adding Navigational Menus in Full Site Editor (FSE)

The new full site editor allows you to customize your WordPress themes using the block editor. It was released in WordPress 5.9 and enables you to add different blocks to your templates to create a unique design.

However, the full site editor is still in beta and limited to specific themes that support it. We’ll use the default Twenty Twenty-Two theme for this tutorial. For more details, you can see our article on the best WordPress full site editing themes.

To add a navigational menu using the full site editor, you’ll first need to go to Appearance » Editor from your WordPress dashboard. You can also click the ‘Customize’ button on the Twenty Twenty-Two theme to open the full site editor.

Go to full site editor Go to full site editor

Once you’re in the editor, go ahead and click on the navigational menu that appears at the top of the website header.

Next, you’ll see different options to customize the navigational menu block from the panel on your right.

For instance, you can change the layout, edit the display settings, show a submenu on click, change the color of the text, background, and submenus, and adjust the font size.

Navigational menu setting in FSE Navigational menu setting in FSE

For more options such as changing the menu or creating a new one, you can click on the ‘Select Menu’ option to open a dropdown menu.

For example, you can select any menu you previously created under the Classic Menus section.

Click select menu button Click select menu button

Once you select a menu, you can add more pages, blog posts, site logos, social icons, or add a search option to your menu.

Simply click the ‘+’ sign to add a block to your navigational menu, and then select an option that appears in the dropdown menu.

Add more blocks to navigational menu Add more blocks to navigational menu

The best part about using the full site editor is that you can add a navigational menu block anywhere on your site.

When you’re done, you can preview the changes to see how the menu looks in real-time. Then don’t forget to click the ‘Save’ button at the top.

Save your changes Save your changes

Adding WordPress Menus in Sidebars and Footers

You don’t have to just stick to the display locations for your theme. You can add navigation menus in any area that uses widgets, like your sidebar or footer.

Simply go to Appearance » Widgets and then click the ‘+’ sign at the top and add the ‘Navigation Menu’ widget block to your sidebar.

Add a navigation menu Add a navigation menu

Next, add a title for the widget and choose the correct menu from the ‘Select Menu’ dropdown list.

When you’re done, simply click the ‘Update’ button.

Add a title and select your menu Add a title and select your menu

Here’s an example of a custom WordPress footer menu built on Syed Balkhi’s website.

Navigational menu preview Navigational menu preview

Going Further with Navigation Menus

If you want to create a truly epic menu with loads of links, we’ve got a tutorial on how to create a mega menu in WordPress.

This lets you create a drop-down with lots of items including images.

Mega menu preview Mega menu preview

Mega menus are a great option if you have a large site, such as an online store or news site. This type of menu is used by sites like Reuters, Buzzfeed, Starbucks, etc.

FAQs About WordPress Menus

Here are some of the most common questions we hear about WordPress navigation menus from beginners.

1. How do I add a homepage link to a WordPress menu?

To add your homepage to a navigation menu, you’ll need to click the ‘View All’ tab under Pages. From there, you should see your homepage.

Add homepage to menu Add homepage to menu

Check the box next to ‘Home’ and click ‘Add to Menu’. Don’t forget to save your changes.

2. How do I add multiple navigation menus in WordPress?

In WordPress, you can create as many menus as you like. To place a menu on your website, you’ll need to add it to one of your theme’s menu locations, or to a widget area as we showed above.

To add multiple navigation menus to your WordPress site, first create the menus following our tutorial above.

To place them on your site, click on the ‘Manage Locations’ tab.

Manage menu locations Manage menu locations

From here, you can select which menu you’d like to display in the menu locations that are available in your theme.

If you want to add a new menu location to your site, see our tutorial on how to add custom navigation menus to WordPress themes.

We hope this article helped you learn how to add a navigation menu in WordPress. You may also want to check out our guides on how to style navigation menus in WordPress and how to create a sticky floating navigation menu in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Shares 484 Share Tweet Share Facebook Messenger WhatsApp Email

navigation-menu

How to Create, Add, & Edit a WordPress Navigation Menu

Updated on July 22, 2022 – Rob Pugh

Wondering how to create and customize a menu in WordPress? Navigation menus list your most important pages, allowing visitors quick access no matter where they are on your site. The built-in WordPress menu editor is pretty powerful, but can take some getting used to.

If you don’t know where to start or need help customizing your menu with certain features, you’ve come to the right place. Let’s get your new and improved navigation menu up and running.

How to find the WordPress menu editor

Let’s start by finding the WordPress menu editor. First, log in to your WordPress dashboard, then navigate to Appearance → Menus. You might see a menu in place already, and you can either edit this one or create a new one.

Appearance --> Menus section of the dashboard

You can also edit your menus using the theme customizer screen. This has the benefit of providing a live preview of your edits as you work. On the Menus page, click the Manage with Live Preview button, or go to Appearance → Customize and click the Menus option.

Either method provides almost exactly the same options, so choose whichever one you prefer.

How to create a custom menu in WordPress

First, let’s learn how to create a new menu in WordPress. If you already have an existing one, then just click the Create a New Menu link near the top of the page.

If you haven’t made a menu yet, then you don’t need to click anything — you’ll be dropped right into the menu creation screen.

blank menu page in WordPress

Lastly, if you’re on the Live Preview screen, you can just click the Create New Menu button at any time.

Come up with a name for your menu that describes its purpose, then choose where it should show up on your site. Once you’ve filled out these simple requirements, you’re ready to start fleshing out your menu and adding items.

How to edit a menu in WordPress

Need to edit an existing menu? If you have only one menu, just go to the Appearance → Menus screen, and it will be right there on the page, ready to be customized.

If you have multiple menus, you’ll see the Select a menu to edit dropdown near the top of the page. Pick the one you want, then click Select to load it.

If you’re using the Theme Customizer, you’ll see a list of all your existing menus at the top as soon as you open the Menus screen. Just click the one you want to open.

How to add items to your WordPress menu

Now it’s time to get into the real meat of creating a menu: adding items and customizing their functionality. Maybe you want to create a nested dropdown menu, add certain pages or posts to it, or add other items to your menu bar. 

1. Add a page or post to your menu

First, you’ll want to give easy access to your most important pages, so let’s add some links to your menu. This is an important part of navigation on your site, and it’s very easy to add new entries to a menu.

Look to the left box, where you should see the Add menu items box with several tabs. Open the Pages tab, which contains three categories: Most Recent, View All, and Search.

The first will show a handful of your latest pages for easy access. If you have hundreds of pages on your site, the View All tab will likely be a bit unwieldy. Instead, use the Search tab to find the ones you want to add.

adding pages to your menu

You can also click the Select All checkbox at the bottom if you want to add all displayed pages to your menu.

When you’ve selected what you want, click Add to Menu to finalize your selections. Your new pages will now be listed on the right.

For blog posts, it works very similarly. Select the Posts tab, and as before, choose from all of your most recent posts, or search for the ones you want. Then click Add to Menu.

What if you want to remove a menu item you’ve added? There are two ways to do so. In the Menu structure section on the right, select one of the pages or posts by clicking the arrow on the right. Then, click the red Remove link.

removing a page from the menu

You can also bulk remove multiple pages at once. Click the Bulk Select checkbox and then tick each menu item you want to delete. Then click Remove selected items.

Finally, you can rename menu items so they appear with a different title. Select a page item using its dropdown arrow, then change the Navigation Label. This is useful if you want your menu items to have a shorter title to save space.

2. Add a blog category to your menu

What if you want to link to a top-level category page from your blog? After all, you may want to give visitors easy access to top-level category pages to encourage them to keep reading.

This is very similar to adding a post or page, except you need to click the Categories dropdown tab. Then you can pick from your most-used categories, see the whole list, or search for the ones you want.

When you’re finished, click Add to Menu and it will appear on the side just like a post or page.

adding a category to the navigation menu

3. Add a custom link to your menu

What if there’s a page on your site that’s not covered by the other categories, or you want your menu to link to an external site? In that case, you can add a custom link. This can link to any URL you want.

Click the Custom Links tab, then insert the URL, set the menu text, and click Add to Menu.

adding a custom link to the menu

4. Add a link to your menu that opens in a new tab

Sometimes you want a menu link to open in a new tab so visitors can return to your website and keep browsing. This is especially true if you’ve added an external link — if you send visitors to another site, there’s no guarantee they’ll return.

This is a hidden option within the Menus interface. You’ll need to turn it on by clicking Screen Options at the top of the screen, then ticking the Link Target checkbox.

setting a menu item to open in a new tab

Now when you use the dropdown arrow on a menu item, you’ll see a new checkbox: Open link in a new tab. Click it, and you’re good to go.

open link in new tab option

5. Add a link to a section of a page from your menu

Sometimes you want to link to a specific section of a page. In that case, rather than using the typical Posts or Pages dropdown, use the Custom Links section.

First, you need to create a custom URL that will jump visitors down to the proper section. You’ll want to create what’s called an “anchor,” which you can do in the Block Editor. Then, you’ll add the anchor that you created to the end of your site URL with a # symbol. For example, if your anchor is “create-a-page-jump,” your URL will be https://example.com/#create-a-page-jump.

Paste this into the custom links bar, set its label, and click Add to Menu.

6. Add a dropdown menu item

Nesting items is an important part of menu functionality. This is how you make certain menu items drop down on hover. You can nest items as deeply as you want, creating submenus within submenus infinitely.

There are two ways to do this. The first option is to simply click the item you want to nest and drag it to the right until the dotted lines shift to the right as well. Keep doing this to nest more items.

The second way is to open the menu item you want to move and click the Under [Menu Item Name] link.

nesting menu items in WordPress

7. Add a menu item without a link

Most of the time, you’ll want your menu items to link to a page. But sometimes, like when creating a dropdown menu, you just want the top-level link to be text and nothing else.

To do this, create a Custom Link like normal, but instead of inserting a link, insert the # symbol. Then title the menu item as usual and click Add to Menu.

adding a blank link to the menu

You can leave the # symbol if you want, or you can open your new menu item, delete the symbol, and click Save Menu.

While the menu item still looks like a link, it will not be clickable. You can always change its styling with CSS if you want it to look different. We’ll show you how to do that later.

8. Add a search icon or bar to your menu

If your theme has a header widget, adding a search bar to it is easy. Just go to Appearance → Widgets, click the blue + in the top left corner, and drag the Search widget into the header area.

If this doesn’t work, you’ll need to switch to a theme that places a search bar in the header or use a plugin. Most popular WordPress search plugins include an option to add a search bar to the header menu.

9. Add a description to a menu item

While it isn’t usually necessary, you may want to add a description to your menu items. Maybe you want to give a brief description of where this link will take visitors when they click.

First, on the Menus screen, open the Screen Options at the top right and tick the Description checkbox. You’ll now find a Description box whenever you open a menu item from its dropdown arrow.

adding a description to a menu item

Type in a description and make sure to click Save Menu. When you visit your site, you should see your new description. Remember that not all themes support this feature.

How to activate your WordPress navigation menu

When you’re finished customizing your menu and are ready to show it to the world, all you need to do is pick a Display location for it. It will then show up on your site.

Conversely, if you want to work on your menu in private, just don’t select a display location until you’re finished. A menu without a display location is essentially invisible to all visitors.

Not sure how to set a display location? Let’s go over it.

How to change your menu position in WordPress

If you don’t like where your menu is located or aren’t sure how to set it to display where you want, it’s very easy to change the menu position in WordPress.

There are three ways to do this: First, on the Appearance → Menus screen in the default Edit Menus tab, look to the main menu editing area. You should see a section labeled Menu Settings. Then look for Display location.

Now just tick the boxes where you want your menu to appear. You’ll need to go visit your site to see how your new menu looks.

choosing a display location for a menu in WordPress

The second way to change the menu position in WordPress is to click on the Manage Locations tab, then assign which menus you want to appear in each one. This is a little easier to set up if you have multiple menus.

Finally, you can use the Live Customizer. Open up Appearance → Customize and click the Menus tab, then either select the menu you want to edit or click the View All Locations button. The benefit of this is you get to immediately see what your menus will look like and the location of each display option.

Keep in mind that each display location can only be occupied by one menu at a time, though you can assign a single menu to multiple display locations.

Also, display locations are determined by your theme. If you don’t have the ones you’re looking for, you may need to switch to a new theme.

How to use multiple menus across your WordPress site

You’re not limited to a single menu. You can create as many as you have space to display (and more!). You could have your main menu, a more compact sidebar menu, a separate menu in your footer, etc. It all depends on the number of menu locations your theme provides.

In any case, you can create a second menu by clicking Create a New Menu and selecting a separate display location for it. Just fill out the name and set pages for it as you did with your first menu and repeat as many times as you need.

choosing between multiple menus

The live preview screen is even more intuitive; just click the Create New Menu button, and all your created menus will be listed in one easy-to-access place.

Remember to use the Manage Locations screen to more easily assign each menu to a location, as it’s much more streamlined than having to manually select and set options for each menu.

How to style your menu’s appearance using CSS

While WordPress provides some basic options to get your menu acting the way you want, when it comes to its actual appearance, there’s not a lot there. But if you’re not happy relying on your theme’s menu styling, you can take control with CSS.

While CSS can be difficult to learn, you don’t need to be an expert to use it. For basic appearance tweaks, you just need to know what to change and where to put it.

Before you start, make sure you have a recent backup of your site. If you’re using Jetpack Backup, all of your changes are saved in real time and can be restored in just a few clicks if you make a mistake. 

While you can edit your theme files directly, this generally isn’t recommended unless you’re adding a lot of CSS, especially if you’re not using a child theme. Instead, you can use the Additional CSS box on the Appearance → Customize screen or the Custom CSS feature available in Jetpack.

You also need to find your theme’s menu class. If you have multiple menus in your theme, each will have a different class.

For example, in the Twenty-Twenty WordPress theme, the class for the primary menu is simply “.primary-menu”.

Right-click your menu and use the Inspect Element tool to find your menu’s class.

finding a menu's class

Should any of the sample codes not work, your theme may be forcing a certain style, locking in a font size, color, and so on. You can override this using the !important tag, but try to do so sparingly. It can be better to create a child theme and edit your stylesheet directly if you’re skilled in CSS.

1. How to target a single menu item

You may want to change a single menu item rather than all of them at once. For this, go to the Appearance → Menu page, open Screen Options, and turn on CSS Classes. Edit a menu item and give it a CSS class, then replace the “.primary-menu” in the code examples provided below with the custom CSS class.

So if you set the homepage link to have the “home-menu” class, replace “.primary-menu” with “.home-menu”.

editing a menu with CSS

2. How to change the font size of your menu

If your menu is a little too bulky or a little too hard to read, try changing the font size. Use this code to do so:

.primary-menu { font-size: 30px; }

Just change the “30px” to whatever size you want.

setting a menu's font size to 30px

3. How to change the color scheme of your menu

A common request from WordPress users is to change the color of links in their menu or even add a background color.

Let’s start by changing the font color. Use the following code:

.primary-menu li a { color: #000000; }

This will make your menu links black. Substitute the color hex code above – you can use a color code site to easily create a hex code of the color you want. 

What about the background color? Try this for a teal background:

.primary-menu { background-color: #00ffff; } changing a menu's background color to teal

4. How to change your menu’s hover effects

A fancy hover effect can subtly spruce up your design, but that part can get a little trickier. There are many hover effects you can implement, but let’s make a simple one: change the font color when you hover over a menu item.

.primary-menu li.menu-item a:hover { color: #DEB0F1; }

Now if you hover over a link in your menu, it will turn lavender.

cambiar el color de un elemento de menú al pasar el mouse

There’s more to experiment with – try using the background color, opacity, border/border radius and transition tags.

5. How to make your WordPress menu sticky

Sticky or fixed menus follow the visitor as they scroll, meaning they don’t have to scroll all the way to the top to reach the navigation menu. It can be a bit more convenient for people and encourage them to continue browsing.

You do this using the “position:fixed” tag, but you’ll probably need to add a few more to get things working properly.

The following will create a basic floating navigation menu:

.primary-menu { position: fixed; high: 0; right: 0; }

But you might want to use the background, height, width, border, padding, and top/down/left/right tags to create a sticky menu that’s more than just floating text. Here is a simple example:

.primary-menu { position: fixed; high: 0; right: 0; background:#000000; height: 50px; width: 100%; bottom border: 2px solid #F7156B; top padding: 10px; right padding: 30px; } diseñar un menú pegajoso

6. How to add a button to your menu

While it’s possible to add buttons to your menu using plugins, let’s try adding a simple one with CSS. First, you’ll need to define a custom CSS class for the button’s menu item, unless you want every menu item styled that way.

Now try this code:

.menu-button { background: #000000; Padding: 5px 10px 5px 10px; }

If you want to round the corners of the button, try adding this line of code above the closing parenthesis:

border radius: 5px; convertir un elemento del menú en un botón Frequently Asked Questions

For such a simple feature, the menus can get quite complicated once you really understand their functionality. Let’s finish with some frequently asked menu questions in case we missed something.

Can I delete or rename a WordPress menu?

You can create as many menus as you want in WordPress, and it’s entirely possible to delete them. Simply open the Appearance → Menus screen and click on the red text Remove menu.

Vous obtiendrez une fenêtre contextuelle demandant une confirmation. Cliquez sur OK et le menu disparaîtra pour toujours.

If you just want to rename a menu, open it up and change the Menu Name box, then click the Save Menu button. Simple as that!

Can I add tags to a WordPress menu?

It’s possible to add categories to your WordPress menu, but what about tags? Good news: This is built into the menu functionality. You just need to turn it on.

First, make sure you’re on the Appearance → Menus screen, then click Screen Options in the upper right corner. In the Screen elements section, you’ll see a row of options, all but one of which is ticked: Tags. Select it now.

A new menu will appear below the Categories option in the Add menu items section. You can search or pick from any tags you like and add them to your menu.

agregar etiquetas a un menú de WordPress

Can I duplicate a menu in WordPress?

If you want to work on a menu without changes being broadcast live to your visitors, the ability to duplicate a menu could be very useful.

WordPress doesn’t come with this functionality by default, but you can do it with a simple plugin appropriately titled Duplicate Menu. Install it through the Plugins → Add New screen, and you’ll see a new page under the Appearance tab: Duplicate Menu.

Go here and you’ll find a very simple screen prompting you to name your duplicate menu. Then, click Duplicate Menu.

Duplicar un menú en WordPress

This will only take a moment. Then you can jump right to your duplicated menu. Everything will be exactly the same except for display locations, which will be blank as two menus can’t occupy the same space.

No visitors will be able to see your new menu until you set a display location or swap it out with the old menu. You’re free to do your work without worrying about breaking your visible site.

Can I add an image to a menu?

It’s not possible to add an image to your menu by default, but a plugin called Menu Image changes that.

Install it through Plugins → Add New and notice the new Menu Image option in your sidebar. You can go here to set the menu image sizes. Back in Appearance → Menus, open up a menu item and click the new Add Image/Icon button.

Tweak the settings as you like. Click Image to upload an image or Icon to pick from icons. You’ll see a preview before you save.

añadir un icono a un elemento del menú

Can I add a mega menu in WordPress?

If you want a menu with a ton of links, the default menu styling will end up looking very cluttered and unprofessional. Instead, you should create a mega menu for much neater organization.

Unfortunately, WordPress doesn’t support mega menus, so you’ll need to install a plugin like Max Mega Menu.

Install this using Plugins → Add New, and you’ll see a new Mega Menu option near the bottom of the sidebar.

To set it up, go to Mega Menu → Menu Locations and tick Enabled to turn it on. Then you can change the hover animations and menu behavior and even customize a theme in the Menu Themes tab.

creando un mega menú en WordPress

You can also access some of the basic Mega Menu features from the Appearance → Menus screen, where you’ll find a new Max Mega Menu Settings tab.

Can I add a JavaScript onclick event to my menu?

You can add Javascript to your WordPress site by either editing your theme files or installing a plugin like Simple Custom CSS and JS.

Note: If you choose to edit the functions.php file directly, you should set up a child theme first. If your theme updates, all your custom scripts will be lost unless you’re using a child theme.

If you’re not sure how to target an individual menu item, try going to the Appearance → Menus page, open the Screen Options, then turn on CSS Classes. Add a class to the menu item, then target this class in your onclick event.

If you’re using the Mega Menu plugin, you’ll additionally need to go to Mega Menu → Menu Locations, select the menu you’re targeting, click Advanced, and turn off the Unbind Javascript Events option. Just be careful doing this, as it can cause conflicts.

What happens to your menu if you switch themes?

You might be a bit concerned about switching to a new theme if you’ve put a lot of time into organizing your menu. Luckily, switching themes will leave your menu fully intact, so there’s no danger in doing so.

But your old menu will have all of its old display locations unassigned, so you’ll need to go set that up again. Just go to Appearance → Menus and the Manage Location tab, then reassign your menus back to where they belong.

Where are navigation menus located in the WordPress database?

If you need to edit your custom menus in the database for any reason, you can find it within the wp_posts table, within the menu_order field. Navigation menus are built as a custom post type, which is why you can find them there.

Before making any changes to your database, be sure to back up your site using a tool like Jetpack Backup.

A brand new navigation menu

With a few tweaks in the editor and maybe a little CSS, your navigation menu should look just the way you want! As your website traffic increases, it becomes increasingly important for your site to have an optimized menu to help visitors move around.

Now that you know how to customize your WordPress menu, you are well equipped to create one of the most important pillars of website design.

This entry was posted in Website Design. Add the permalink to your favorites.

Rob Pugh profile

Rob Pugh

Rob is Jetpack’s Marketing Manager. He has worked in marketing and product development for over 15 years, primarily at Jetpack, Mailchimp and UPS. Since earning a Master of Science in Marketing from Johns Hopkins University, he’s focused on delivering products that delight people and solve real problems.

Discover the advantages of the Jetpack

Learn how Jetpack can help protect, speed up, and grow your WordPress site.

Get up to 60% off your first year.

Compare plans

Share this

  • Facebook
  • Twitter
  • Whatsapp
  • Suite
  • LinkedIn
  • E-mail
  • To print
  • Pinterest
  • Tumblr
  • Reddit
  • Few

Like that:

I like loading…

Related

Jetpack's navigation menu includes the categories: Product Tour, Pricing, Support, and Blog

How to Improve Website Navigation for a Better User Experience

User experience is giving your visitors what they came for. Improving site navigation can help you do just that, while decreasing your bounce rate and improving your SEO.

December 27, 2018

Dans “Innover”

jetpack-reading

4 Ways to Increase Session Duration and Keep Visitors Longer

Capture your reader’s attention and get them to click through to your site with these tips.

August 23, 2017

In “Features”

7-v1_preview

Create successful e-commerce promotions with social sharing

Note: Publicize is now auto-shared and part of Jetpack Social. Online sales are a great way to attract customers to your online store and encourage them to make purchases. However, holding a sale doesn’t really benefit your business if no one knows about it. Website promotions should be shared…

May 8, 2018

In “Ecommerce”

On Posted on 9 September 202120 June 2022 by Nikola Puciriusa on Tutorials

How to Create and Add a Menu in WordPress

Facebook Twitter Subscribe Pinterest Linkedin

As you are at the start of your journey into WordPress or looking for ways to better your site, creating a well-organized menu should be one of the primary things on your to-do list.

If you are only still thinking about starting your journey, then you can head on over to our tutorials on how to install WordPress, customize your theme, and create a child theme (for making changes in your main theme, without affecting its files) if necessary.

This article will lead you through the process of creating, styling, and managing your menus, as well as explain how to easily add a menu to your page with Visual Composer.

So, let’s get started!

Obtenga más de 50 elementos de contenido gratuitos de Visual Composer

The Purpose of a Menu

A menu is like a map of your website, so it is important that it is easy for the user to understand, navigate, and most importantly find what they are looking for.

A well-designed menu also betters the user experience, and, as you might have already guessed, translates into conversions later on. Visitors are more likely to stay on a site and browse more content if they are able to reach their intended destination.

In fact, statistics show that bad navigation is the third leading cause of a bad user experience, right after slow loading, and non-responsiveness. As a matter of fact, even the greatest design can’t make up for a poorly functioning site.

88% of online consumers are a lot less likely to return after a bad experience

Creating a Menu and Adding Content

Before we add a menu in WordPress, you need to create one. To create a menu:

  1. Go to your WordPress Admin Dashboard
  2. Navigate to Appearance and select Menus from the drop-down
  3. Click Create a new menu
  4. Give your menu a name and click Create MenuCrea y configura un nombre para tu menú de WordPress

Now that you have a menu, it is time to add sections and fill it with content:

  1. Select the type of content you wish to display on your menu on the left side (you can choose from pages, posts, custom post types, custom links, and categories)
  2. Click Add to Menu
  3. Save Menu Add content to your WordPress menu

In case you need to remove a section from your menu:

  1. Navigate to the added items under Menu structure
  2. Select items separately by clicking on the dropdown and pressing Remove
  3. If you wish to remove multiple or all items, click Bulk Select, mark them and press Remove Selected ItemsRemove content from your WordPress menu

After you’ve selected the content, you can arrange it and add sub-sections:

  1. To change the layout of your menu, simply drag-and-drop the sections in your preferred order
  2. To add a subsection drag-and-drop a section under your preferred location
  3. After you have finished making changes to your menu, don’t forget to click Save MenuAdminister and aggregate subsections in the WordPress menu

Note: You can also add sub-sections to sub-sections, creating a mega menu with a drop-down.

Managing the Menu Location

Now that you have your menu ready, you can manage the menu locations easily via WordPress Admin Dashboard or Theme Customizer.

To set a location of the menu on your WordPress site:

  1. Select Appearance and Menus from the drop-down in your WordPress dashboard
  2. In the menu editor switch to the Manage Locations tab
  3. You will see all places where you can place the menu in your theme
  4. Select menus for specific locations from the drop-down menu
  5. Save Changes Administer the location of a menu on the WordPress website

Note: You can also access Advanced Menu Properties (to add link targets, title attributes, CSS classes, link relationships (XFN), and descriptions) hiding in the Screen Options tab at the top right corner of the menu editor.

Adding a Menu with Visual Composer

Visual Composer is a website builder for WordPress, that offers tons of great features when it comes to building a full website in the fastest way possible. And, if you loved the drag-and-drop functionality of WordPress, you will most definitely love our intuitive editor.

Using Visual Composer will save you time when it comes to not only creating and managing but also styling your website menus. Create stunning layouts with over 500 content elements, designer-made templates, and addons, such as theme builder.

Select from a variety of ready-to-go menu elements (basic and sandwich menus, as well as sidebar menus for a more unique design).Menu items in Visual Composer Hub

Para una experiencia de usuario aún mejor, puede hacer que su menú sea fijo, lo que significa que siempre estará visible para el visitante y será más fácil acceder a él.

Finalmente, veamos cómo agregar y administrar menús en Visual Composer:

Pensamientos finales

Ahora sabe cómo crear un menú regular y desplegable, administrar la ubicación y personalizar un menú para su sitio web de WordPress, bastante fácil, ¿verdad?

No solo eso, sino que también sabe que un menú guía a sus visitantes a través del sitio, lo que garantiza una mejor experiencia de usuario, aumenta las conversiones y reduce las tasas de rebote. Para obtener ayuda adicional, siempre puede agregar una barra de búsqueda, en caso de que sus visitantes aún no puedan encontrar lo que están buscando.🥸 🔎

¿Que estas esperando? ¡Descargue Visual Composer for your website building experience easier and faster! ⬇️

Download a free website builder

Facebook Gorjeo Subscribe Pinterest LinkedIn

Balises Menu WordPress

Nicholas Pucirius Nicholas Pucirius

Nicholas Pucirius

A marketing person, who believes there is no such thing as a daily coffee limit.

Previous Previous post: How to create a WordPress child theme

Next Next post: How to create and install WordPress multisite

Google Google translator

Google Google Translate


Video How to create menus in wordpress

Related Posts

How to add seo keywords in wordpress

Contents1 Cómo agregar palabras clave de SEO en WordPress (aumentar el CTR y las clasificaciones)1.1 Post Title1.2 Headline1.3 Header Tags1.4 Introduction and Conclusion1.5 Body Copy1.6 URL1.7 Meta…

How to embed google calendar into wordpress

Contents1 How to Add a Google Calendar in WordPress (Step by Step)2 Add a Google calendar to your website3 calendario de Google3.1 Versatile plans and pricing4 Video…

How to change the logo in wordpress

Contents1 How to Add a Custom Logo to Your Site Header2 Site Logo2.1 Planes y precios versátiles3 Add, remove or edit a custom logo4 Video How to…

How to add a popup on wordpress

Contents1 Easily create a WordPress emergent form (2 forms)1.1 ¿Por qué usar un formulario emergente de WordPress?1.2 Método #1: Crear un formulario emergente con OptinMonster + WPForms1.3…

How to roll back wordpress version

Contents1 How to Revert WordPress: Undo WordPress Updates (Easy Way)2 How to Downgrade WordPress & Roll Back to a Previous Version2.1 1. A WordPress update included significant changes…

How to rollback wordpress version

Contents1 How to Downgrade WordPress and Revert to an Older Version1.1 1. A WordPress update included significant changes that are not compatible with your theme or plugins1.2…