¿Quieres añadir un menú de navegación a tu sitio WordPress?
WordPress viene con una interfaz de menú de arrastrar y soltar que puede utilizar para crear menús de cabecera, menús con opciones desplegables y mucho más.
En esta guía paso a paso, le mostraremos cómo añadir fácilmente un menú de navegación en WordPress.
¿Qué es un menú de navegación?
Un menú de navegación es una lista de enlaces que apuntan a áreas importantes de un sitio web. Suelen presentarse como una barra horizontal de enlaces en la parte superior de cada página de un sitio WordPress.
Estos menús estructuran su sitio y ayudan a los visitantes a encontrar lo que buscan. Este es el aspecto del menú de navegación en WPBeginner:
Con WordPress es muy fácil añadir menús y submenús. Puede añadir enlaces a sus páginas, categorías o debates más importantes, entradas de blog e incluso enlaces personalizados, como su perfil en los medios sociales.
La ubicación exacta de su menú dependerá de su tema de WordPress. La mayoría de los temas tendrán varias opciones, por lo que puede crear diferentes menús que se pueden mostrar en diferentes lugares.
Por ejemplo, la mayoría de los temas de WordPress vienen con un menú principal que aparece en la parte superior. Algunos temas pueden incluir también un menú secundario, un menú de pie de página o un menú de navegación móvil.
Dicho esto, veamos cómo crear un menú de navegación personalizado en WordPress.
- Creating Your First Custom Navigation Menu
- Creating Drop-Down Menus in WordPress
- Adding Categories to WordPress Menus
- Adding Custom Links to Your WordPress Navigation Menus
- Editing or Removing a Menu Item in WordPress Navigation Menus
- Adding Navigational Menus in Full Site Editor (FSE)
- Adding WordPress Menus in Sidebars and Footers
- Going Further with Navigation Menus
- FAQs About WordPress Menus
Tutorial en vídeo
Si prefiere instrucciones escritas, siga leyendo
Cómo crear su primer menú de navegación personalizado
Para crear un menú de navegación, debe visitar la página Apariencia ” Menús en su escritorio de administrador de WordPress.
Nota: Si no ves la opción‘Apariencia ” Menús‘ en tu sitio y solo ves‘Apariencia ” Editor‘, significa que tu tema tiene activada la edición completa del sitio (FSE). Puede hacer clic aquí para omitir la sección FSE que aparece a continuación.
Una vez allí, dale un nombre al menú, por ejemplo “Menú de navegación superior”, y haz clic en el botón “Crear menú”.
Esto expandirá el área del menú, y se verá así:
A continuación, puede elegir las páginas que desea añadir al menú. Puede añadir automáticamente todas las páginas nuevas de nivel superior o seleccionar páginas concretas de la columna de la izquierda.
Primero, haz clic en la pestaña “Ver todo” para ver todas las páginas de tu sitio. Después, haga clic en la casilla situada junto a cada una de las páginas que desee añadir a su menú y, a continuación, haga clic en el botón “Añadir al menú”.
Una vez añadidas las páginas, puede desplazarlas arrastrándolas y soltándolas en la sección “Estructura del menú”.
Así podrás cambiar su orden y reorganizarlos.
Nota: Todos los menús tienen sus elementos / fichas en una lista vertical (de arriba a abajo) en el editor de menús. Cuando pongas el menú en funcionamiento en tu sitio, se mostrará vertical u horizontalmente (de izquierda a derecha), dependiendo de la ubicación que selecciones.
La mayoría de los temas tienen varias ubicaciones diferentes donde puedes poner menús. En este ejemplo, estamos utilizando el tema Astra, que tiene 5 ubicaciones diferentes.
Después de añadir páginas al menú, seleccione la ubicación en la que desea que aparezca el menú y haga clic en el botón “Guardar menú”.
Consejo: Si no está seguro de dónde se encuentra cada ubicación, intente guardar el menú en diferentes sitios y, a continuación, visite su sitio para ver cómo queda. Probablemente no quiera utilizar todas las ubicaciones, pero sí más de una.
Para más detalles sobre este tema, puede consultar nuestro tutorial sobre cómo crear un menú de navegación vertical en WordPress.
Aquí está nuestro menú terminado en el sitio:
Creación de menús desplegables en WordPress
Los menús desplegables, a veces llamados menús anidados, son menús de navegación con elementos de menú padre e hijo.
Cuando sitúe el cursor sobre un elemento / artículo principal, todos los elementos secundarios aparecerán debajo de él en un submenú.
Para crear un submenú, arrastre un elemento / artículo debajo del elemento principal y, a continuación, arrástrelo ligeramente hacia la derecha. Lo hemos hecho con 3 subelementos debajo de “Servicios” en nuestro menú:
Incluso puedes añadir varias capas de desplegables para que tu submenú tenga un submenú. Esto puede terminar pareciendo un poco desordenado, y muchos temas no son compatibles con menús desplegables de varias capas.
Para obtener instrucciones más detalladas, consulte nuestro tutorial sobre cómo crear un menú desplegable en WordPress.
Aquí está el submenú en vivo en nuestro sitio de demostración:
Añadir categorías a los menús de WordPress
Si tiene un blog en WordPress, puede añadir las categorías de su blog en el menú desplegable de WordPress.
Nosotros hacemos esto en WPBeginner y tenemos múltiples categorías como noticias, temas, tutoriales y más.
Puede añadir fácilmente categorías a su menú haciendo clic en la pestaña Categorías situada en la parte izquierda de la pantalla del menú. También puede hacer clic en la pestaña “Ver todo” para ver todas las categorías.
Sólo tiene que seleccionar las categorías que desea añadir al menú y, a continuación, hacer clic en el botón “Añadir al menú”.
Las categorías aparecerán como elementos de menú normales en la parte inferior de su menú.
A continuación, puede arrastrarlas y soltarlas en su posición. Por ejemplo, vamos a colocar todas estas categorías bajo el elemento / artículo Blog.
Para más instrucciones, consulte nuestra guía para principiantes sobre cómo añadir debates en los menús de navegación de WordPress.
Así es como aparecen las distintas categorías en el menú de navegación de nuestro sitio de demostración:
Añadir enlaces personalizados a los menús de navegación de WordPress
Minientrada a las categorías y páginas, WordPress también hace que sea superfácil añadir enlaces personalizados a tu menú. Puedes enlazar con tus perfiles en medios sociales, tu tienda online y otros sitios web de tu propiedad.
Para ello, tendrá que utilizar la pestaña “Enlaces personalizados” de la pantalla Menú. Simplemente añada el enlace junto con el texto que desea utilizar en su menú y haga clic en el botón “Añadir al menú”.
Incluso puede ser creativo y añadir iconos de medios sociales en su menú o botones de llamada a la acción para conseguir más conversiones.
Editar o eliminar un elemento / artículo en los menús de navegación de WordPress
Cuando añades páginas o categorías a tu menú de navegación personalizado, WordPress utiliza el título de la página o el nombre de la categoría como texto del enlace. Puede cambiar esto si lo desea.
Cualquier elemento del menú puede editarse al hacer clic en la flecha hacia abajo situada a su lado.
Desde aquí puede cambiar el nombre del elemento / artículo del menú. También puede hacer clic en “Quitar / eliminar” para eliminar el enlace de su menú.
Si tiene problemas con la interfaz de arrastrar y soltar, también puede desplazar el elemento / artículo del menú al hacer clic en el enlace “Mover” correspondiente.
Añadir menús de navegación en Full Site Editor (FSE)
El nuevo editor de sitios completo te permite personalizar tus temas de WordPress mediante el editor de bloques. Se activó / activo en WordPress 5.9 y le permite añadir diferentes bloques a sus plantillas para crear un diseño único.
Para añadir un menú de navegación utilizando el editor completo del sitio, visite Apariencia ” Editor desde su escritorio de WordPress.
Usaremos el tema por defecto Twenty Twenty-Three para este tutorial. Para más detalles, puedes consultar nuestro artículo sobre los mejores temas de WordPress para la edición completa del sitio.
Una vez en el editor, haz clic en la pestaña “Navegación” para ampliarla.
Se abrirán nuevos ajustes en la columna de la izquierda.
Desde aquí, basta con hacer clic en el icono “Editar” de la parte superior.
Se abrirá el editor del sitio completo en su pantalla, donde podrá hacer clic en el icono “+” para añadir un elemento / artículo al menú de navegación.
Se abrirá una indicación y podrá seleccionar una de las opciones que aparecen en el menú desplegable.
Sin embargo, si desea añadir un enlace personalizado, puede añadir una etiqueta y una URL para el elemento del menú de navegación en el panel de bloque. También puede añadir una opción de búsqueda a su menú.
Una vez añadido un elemento, pase a la pestaña “Estilos” de la columna de la derecha.
Ahora puede cambiar la tipografía, el aspecto, la altura, el espaciado, las mayúsculas y minúsculas y la decoración del texto de sus elementos de menú.
Si desea añadir un submenú, también puede hacerlo al hacer clic en su icono en la barra de herramientas del bloque.
Cuando hayas terminado, puedes obtener una vista previa de los cambios para ver cómo queda el menú en tiempo real. Luego no olvides hacer clic en el botón “Guardar” de la parte superior.
Añadir menús de WordPress en barras laterales y pies de página
No tienes por qué ceñirte únicamente a las ubicaciones de visualización de tu tema. Puedes añadir menús de navegación en cualquier zona que utilice widgets, como la barra lateral o el pie de página.
Simplemente ve a Apariencia ” Widgets y luego haz clic en el botón ‘Añadir Bloque’ (+) en la parte superior y añade el bloque de widget ‘Menú de Navegación’ a tu barra lateral.
A continuación, añada un título para el widget y elija el menú correcto en la lista desplegable “Seleccionar menú”.
Cuando haya terminado, sólo tiene que hacer clic en el botón “Actualizar”.
Este es un ejemplo de un menú de pie de página de WordPress personalizado creado en el sitio web de Syed Balkhi.
Ir más allá con los menús de navegación
Si quieres crear un menú realmente épico con un montón de enlaces, tenemos un tutorial sobre cómo crear un mega menú en WordPress.
Permite crear un desplegable con muchos elementos / artículos, incluidas imágenes.
Los mega menús son una gran opción si tienes un sitio grande, como una tienda online o un sitio de noticias. Este tipo de menú lo utilizan sitios como Reuters, Buzzfeed, Starbucks, etc.
Preguntas frecuentes acerca de los menús de WordPress
Estas son algunas de las preguntas más comunes que escuchamos de los principiantes acerca de los menús de navegación de WordPress.
1. ¿Cómo añadir un enlace de página de inicio a un menú de WordPress?
Para añadir tu página de inicio a un menú de navegación, tendrás que hacer clic en la pestaña “Ver todo”, debajo de Páginas. A partir de ahí, deberías ver tu página de inicio.
Marca la casilla siguiente a “Inicio” y haz clic en “Añadir al menú”. No olvides guardar los cambios.
2. ¿Cómo añadir varios menús de navegación en WordPress?
En WordPress, puedes crear tantos menús como quieras. Para colocar un menú en su sitio web, tendrá que añadirlo a una de las ubicaciones de menú de su tema, o a un área de widget como mostramos anteriormente.
Si desea añadir varios menús de navegación a su sitio WordPress, primero cree los menús siguiendo nuestro tutorial anterior.
Para colocarlas en su sitio, haga clic en la pestaña “Gestionar ubicaciones”.
Desde aquí, puede seleccionar qué menú desea mostrar en las ubicaciones de menú disponibles en su tema.
Si desea añadir una nueva ubicación de menú a su sitio, consulte nuestro tutorial sobre cómo añadir menús de navegación personalizados a los temas de WordPress.
Esperamos que este artículo te haya ayudado a aprender cómo añadir un menú de navegación en WordPress. Puede que también quieras comprobar nuestras guías sobre cómo dar estilo a los menús de navegación en WordPress y cómo crear un menú de navegación flotante fijo en 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.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Lindsey says
Thank you for these instructions, very helpful! I have a question that I think relates back to my menu but I’m not totally sure. When I click on a menu item from the home page the site address adds “aboutme” between the main address and the menu page. I do not have anything called “about me” on my site. I don’t understand why it is adding this extra piece of information to each page. Any suggestions on how to remove this “aboutme” information?
hans says
Thank you.
I learned much knowledge.
Karen says
Hi. I am using Ocean WP and Elementor.
I have a menu organized, but there on one of my Nested menu dropdown sections I want the FIRST category NOT to be linked to a page (I tried to remove the link but I failed).
The nested section is as follows: THERAPY (on top)>Individual>Group
I don’t want THERAPY to lead to a page, it’s blank, it’s just a category I guess. I’ve done this in my previous site but I can’t for the life of me remember how to do it!
I did create a “page” called Therapy so it would show up in the menu options…help me obi wan kenobi you are my only hope!
Dr Karen
WPBeginner Support says
Hi Karen,
Add your top link Therapy as a ‘Custom Link’. In the URL field enter # sign and click add to menu. Adjust its position in the menu and then click on Save Menu button.
Administrador
Eric Wenocur says
Aha, that’s how you do it! Thanks, great tutorials!
WPBeginner Support says
You’re welcome, glad you like our content
saurabh says
Hello,
We use the two menu system (i.e. primary/top & main/secondary menu) across our websites. And the top/primary menu does not appear on the mobile website.
One of our clients, want both the menus to be visible on the mobile site. Any suggestions on how to do that?
(The website is running on newspaper theme, if that helps.)
Ahmed says
Suppose I want to post many articles related to android. Should I create a android page or android category in my wp menu.
WPBeginner Support says
Hi Ahmed,
Categories are better to sort your content into different topics. You can add a category to your website’s navigation menu and then it will show all posts filed under that category.
Administrador
Lerissa says
Hi – Thanks for providing this.
I don’t have any items in my Pages section, which is strange, because my site has several. Did I configure a setting wrong?
Lerissa
WPBeginner Support says
Hi Lerissa,
What happens when you click on ‘View All’ under pages?
Administrador
Tom says
Thanks for this illustration.
Manish Ransubhe says
hi sir
thank you, i have started my new WordPress blog and I Stuck on the menu I don’t know how to add menu thanks for your this useful post and Your site helped me to launch my website.
WPBeginner Support says
Hi Manish,
Glad you found this guide helpful. You may also want to subscribe to our YouTube Channel for WordPress video tutorials.
Administrador
Cyndi Jarvis says
Hi and thanks for your support. I have a website almost completed, pretty basic but want to link the menu items to the page that relevant text exists and somehow be able to take the user back to the main menu with a back button. Can you please help.
Thanks
WPBeginner Support says
Hi Cyndi,
The tutorial above allows you to link to pages and add them to navigation menus. Seems like you want something a little different, can you please provide more details?
Administrador
cyndi says
Thanks for trying to help. I am not looking for anything unusual with my menu in the website. I have menu items setup as Home, About Us, Services, Contact. The menu name is First Menu and set to primary. What happens is that I click on Home and the page flashes but I don’t go anywhere. This happens with all of the menu items I click on. Any suggestions what I have setup incorrectly?
Thanks
WPBeginner Support says
Hi Cyndi,
You can try this. Go to Apperance » Menus page and click on create a new menu. The following the instructions in the article create new menu by adding your pages from left column to the right. After that select the location for your menu ‘Primary’ and then click on save menu button.
If this doesn’t solve your issue, then preview your website with a default theme. If your navigation menu works as expected with the default theme, then there may be some issue with your current theme. Hope this helps.
Administrador
Regina Clarke says
This was so helpful and it worked beautifully on my laptop. But on my iPhone the submenu categories I dropped into my Blog menu (which all show up indented as they should) also include the description I created of the category. On my laptop that appears on the archive page for each category but on the phone it appears in the dropdown, which makes it all look muddy. Is there a way to create yet another indent for just the descriptions under each category, effectively nesting three levels?
Thanks very much for any suggestions.
Jillian says
Hi there, I have created a nested menu which looks great in the desktop version, but when it gets to the mobile version everything nested is shown on the menu at once! It creates a super long menu page. I have a responsive theme and am unsure if can be fixed.
Amber Shock says
Thanks for making such an easy to follow video. It helped a lot and I quickly got my issue figured out.
Bartek says
I have problems that wordpress doesn´t let me add any category any more or even is deleting and changing place of some which were once added. Anybody know what can be a reason?
Ahmed Azeem says
My website don’t have option of primary, secondary but main and footer menu. I want to add top menu in my website can you please guide me how to add top menu. also in my portfolio page whatever items I am adding is not showing so kindly help me out regarding that. Thanks in advance.
John says
I thought this was an explanation about how to add a navigation menu in your WordPress site, but it’s missing the vital code to actually add it to your website. This is the dumbest tutorial (or article title) I have ever seen.
WPBeginner Support says
Hi John,
You may want to check out our tutorial on how to add custom navigation menus in WordPress.
Administrador
Shibani says
I have a site where I want to display custom menu which is a category – like travel. It works fine, but it displayed – Category – Travel above posts. How can I hide that? I’m using wordpress.com and using free plan.
Prachi says
Suppose my website is example.com
I want to create a tab called HOME and place it menu.
Whenever I am creating this HOME, the url does not accept example.com
It is becoming as example.com/home.
What should I do?
WPBeginner Support says
Hi Prachi,
WordPress already has a navigation menu that you can use. On the navigation menus screen click on the pages and then click on View All. There you will see all your pages and an item called Home. Select home and then click on add to menu button.
Administrador
John says
I have followed the above instruction. My menu though will not actually appear on any of the sites pages. May I have some guidance please ?
John
Haitham Alnaqeb says
Have tried a different themes? Sometime the themes you are using is not supported to some of these futures.
Ike Ezeani says
I created a second dropdown menu but when I click the main menu I see the dropdown but it takes to a blank page. Please help.
Stephen B says
Hello,
When I log into my wordpress, my edit menu looks completely different and I am having a significantly difficult time adding menus and customizing my site because of this. Can you help me?
Malkeet says
Hi, Thanks for the nice detailed explanation of adding menu, but how to call this menu ????
Husnaa says
Thanks for helping me out.
Keep helping others.
Lucy says
Hi, I’m really struggling with navigation for a clients site and am not sure how to explain what i need. When you click on a Top-Level menu item, I want it to open an additional menu underneath. Each Top-Level will have a different sub menu that stays activated whilst you are in that area of the site.
Like on this website
When you click on say “Commercial Solar” another menu appears and allows you to browse the commercial solar area. The top menu stays selected throughout.
Any help you can offer would be great! Thanks Lucy
WPBeginner Support says
Hi Lucy,
Please see our article on how to add a menu item without linking to a page.
Administrador
David Blaska says
I want to link my pages to headers on the home page that synopsize those pages. How to do? (Like “Our History,” “Who We Are,” etc.) I have a page for each of those but a small blurb on each on the Home Page. Would like for visitors to click on the header of each of those.
Michael says
Hi, I need for my main navigation window to ‘push up’ as opposed to ‘drop down’. I’m using Google Doubleclick Ad Exchange for display ads and they claim that my drop down menu could create false clicks on ads. Is there anyway that I could make it push up?
Emma says
Thank you so much for this, been trying to figure out how to create drop down menus, this really helped!
isa alshabany says
hello
I Am A Beginner Not Professional , I Am Using A Template Theme & You Can See It In My Site .. I Have An Arabic Menu .. I Need To Create An English Menu Underneath It So English Speaking Browser Can Access The English Pages .. Thanks A Lot .. Isa
Haitham Alnaqeb says
I think you need to have multi WordPress websites and insert a code in your landing page to redirect your visitors based on their computers language or countries. Each of these website will have a WordPress with its language because it is does not make sense to me if I log in into an Arabic websites that has only Menu in English or the opposite.
Steven Denger says
Helo – I have a subdomain for . I really do not use it except to store pages. On one experiment, I use a css code for a page to hide header and navbar. But since then when I removed the css code and tried to create a menu, the nav bar will not show. I am quite familuar with wordpress menus and how to place them. But I just cannot get this one to show. I exported some pages into this subdomain and tried to create a menu – but it is no use – it just will not show. This is what gets me about wordpress – you never know when or how it is going to go haywire. Would ou know what the matter is?
Paul Nye says
How can I add a drop down menu in an area of a page other than my sidebar widget?
Mary says
HI there,
I was actually wondering if the custom menu takes the place of the default navigation menu. How does it effect the existing default menu and its nesting?
I would have to remember to add my pages to the custom menu.
It may sound silly, but this seems very complicated to me.
I wanted to make a few pages unclickable (like “reviews”) and I like the eventual idea of sub nesting
Thanks for putting so much energy into this article. Mary
munir says
Hi all
how could i add a menu on a certain page of my website? (i don’t need the menu to appear on the home page or the front page)
thank you all
Asir says
You need to install and activate plugin called (Page Specific Menu items)
How to make this plugin work?
Create a menu from appearance > menus
Select the menu you want to use from settings > PS MenuItems > Select Menu
Assign the menu to menu location from appearance > menus
Check the items you want to hide from pages > edit > Page Specific Menu Items
View the page and the selected items should be gone.
jenijeya says
super to quickly understand
Lucas Phan says
Hey bro, i have a question for you.
How to create side menu like this
thank bro.
WPBeginner Support says
Can be achieved using CSS and JavaScript. See our article on how to add a slide panel menu in WordPress themes, and try using it as a starting point.
Administrador
Zac says
Hi, I don’t see all those fancy options (e.g., drag and drop sub menus etc) on my FREE wordpress site. I wonder if the information you gave is for the premium wordpress version. Thanks
WPBeginner Support says
Hi Zac,
These options described in the tutorial are available in self hosted WordPress.org sites. You are probably using a free WordPress.com website. Please see our guide on the difference between self hosted WordPress.org vs free WordPress.com blog.
Bridget says
Thank your for this video. It all seems very simple, but for me when I open wordpress, I do not have the option to choose “appearance.” There is just a link for “menu.” I have created a menu that appears on my blog, but I cannot add categories to it, so the menu is basically useless. When you click on, say, “travel planning” in the menu, it won’t take you to all the article about travel planning, just to something random. I am working on an 11″ laptop, and I read something that said possibly the issue is the size of the screen? If so, I am not sure how to work around that since I travel long term and this is all I have to use. Do you have any suggestions? I really want the menu to work so people can find what they’re looking for! Thanks! Bridget
Hatem Tahir says
Hello,
under the menu theme location, i’m not seeing ‘Primary’, ‘Secondary’, thus the pages I added were not shown on the main header, can you please help.
Thanks much
sreekanth says
thanks for the guide and how to create the catagerious (if you know please create the video)
Deepak Raghav says
Hello Sir, I wan t to create more navigation menu in my wordpress themes. Please tell me how to add more
Dylan says
Thank you for the insight, found this very helpful.
Question,
I currently have a menu button link to a certain area of my home page, for instance I named a section/column “#portfolio” so the page will scroll down to that section when the menu button “Portfolio” is clicked.
My problem is that when the user goes to a menu page that loads a new page, my portfolio button wont go back to the home page, its just a dead link/ menu button.
Mija says
Great-thank you sooooo much for making it so succibt, precise, clear and understandable!!!
Rafi sultan says
Really nice ,every step s defined clearly ,nice material.
thanks
Carrie says
Thank you for the information! Understand
1) If I can create different menus but may I know if I can tailor make the location (even if the theme doesn’t provide it) ?
OR
2) Create a double line menu bar at the primary menu (instead of hide those tabs that don’t fit in one line)
I’m using pique theme at wordpress.com
Many thanks and really look forward to a solution.
Cheers,
Carrie
Jennifer says
This helped me so much! Thank you! Thank you! Thank you!
lisa thomson says
Thanks for this informative how to, article, Sayed. I have a question. I changed my menu and for some weird reason it’s now overlapping into my side bar. So, it’s uneven on the top. Do you know how that can be corrected? I appreciate any tips you have.
Dr.sunita karmankar says
Hi, Thanks for the nice detailed explanation of adding menu, it really helped me
khalid mehmood says
It really helped.
thanks.
Laxmikant Bhumkar says
Super excellent information on a navigation menu. Very easy to learn.
Chirag says
Really nice. Go it very easily. Thank you a lot!
You Rock
pinku says
very very useful information…now it is easy to create navigation menu
thanks a lot
Sheryl Roger says
Excellent material. Every step is defined so clearly that even a novice can implement this step without any difficulty. Thanks for sharing such material as it will be very helpful for beginners in website development.
Francisco says
Nice article.
Thanks!