En välstrukturerad navigeringsmeny är viktig för att guida besökare genom din WordPress-webbplats och se till att de enkelt kan hitta den information de behöver.
Oavsett om du skapar din första webbplats eller försöker förbättra användarupplevelsen på en befintlig webbplats är det viktigt att lära sig hur man lägger till och anpassar en navigeringsmeny.
WordPress har ett menygränssnitt med dra-och-släpp-funktion som du kan använda för att enkelt skapa huvudmenyer, menyer med rullgardinsalternativ och mycket mer.
Genom åren har vi skapat en mängd olika menyer för våra olika varumärken, vilket har gett oss förstahandserfarenhet av att utforma menystilar. Vi har lärt oss vilka typer av menyer som fungerar bäst för olika företag, vilka länkar och sidor som ska inkluderas och hur man optimerar navigeringen för en bättre användarupplevelse.
I denna Step-by-Step guide visar vi dig hur du enkelt kan add to en navigation menu i WordPress.
Vad är en navigation menu?
En navigeringsmeny är en lista med länkar som pekar till viktiga områden på en webbplats. De presenteras vanligtvis som ett horisontellt fält med länkar högst upp på varje sida på en WordPress-webbplats.
Dessa menyer ger din site struktur och hjälper besökarna att hitta vad de letar efter. Så här ser navigation menu ut på WPBeginner:
WordPress gör det väldigt enkelt att add to menyer och undermenyer. Du kan add to länkar till dina viktigaste pages, categories eller topics, blogginlägg och till och med customize-länkar som till exempel din profil på sociala medier.
Den exakta positionen för din menu beror på ditt WordPress theme. De flesta teman har flera alternativ, så att you kan skapa olika menyer som kan displayed på olika ställen.
De flesta WordPress-teman har t.ex. en primär meny som visas högst upp. Vissa teman kan också innehålla en sekundär meny, en sidfotsmeny eller en mobil navigationsmeny.
Med detta sagt, låt oss se hur du kan skapa en customize navigation menu i 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
- Video Tutorial
- FAQs About WordPress Menus
Skapa din första customize navigation menu
För att skapa en navigation menu måste du besöka sidan Appearance ” Menus i WordPress adminpanel.
Note: Om du inte ser alternativet ’Appearance ” Menus’ på din site och bara ser ’Appearance ” Editor’, betyder det att ditt theme har aktiverat Full Site Editing (Redigering av hela webbplatsen). You can click here to skip ahead to the Redigering av hela webbplatsen section below.
När du är där, ange ett namn för din meny, gillar ”Top Navigation Menu”, och klicka sedan på knappen ”Create Menu”.
Då förstoras area för menyn och den kommer att se ut så här:
Därefter kan du välja vilka sidor du vill lägga till i menyn. Du kan antingen automatiskt lägga till alla nya sidor på toppnivå eller välja specifika sidor i den vänstra kolumnen.
Klicka först på fliken ”Visa alla” för att se alla sidor på din webbplats. Därefter klickar du i rutan bredvid varje sida som du vill lägga till i menyn och klickar sedan på knappen ”Lägg till i menyn”.
När dina pages har addats kan du flytta runt dem genom att drag and drop dem i sectionen ”Menu Structure”.
På så sätt kan du ändra ordningen på dem och ordna om dem.
Observera: Alla menyalternativ visas i en vertikal (uppifrån och ned) lista i menyredigeraren. När du lägger upp menyn live på din webbplats visas den antingen vertikalt eller horisontellt (från vänster till höger), beroende på vilken plats du väljer.
De flesta themes har flera olika locations där du kan placera menyer. I det här exemplet använder vi temat Astra, som har 5 olika locations.
När du har lagt till sidor i menyn väljer du den plats där du vill visa den och klickar på knappen ”Save Menu”.
Tips: Om du inte är säker på var varje location finns kan du försöka save menyn på olika ställen och sedan besöka din site för att se hur det ser ut. Du kommer förmodligen inte att vilja använda all locations, men du kanske vill använda mer än en.
Om du vill ha mer detaljer om detta kan du läsa vår tutorial om hur du skapar en vertikal navigation menu i WordPress.
Här är vår slutförda menu på sajten:
Skapa rullgardinsmenyer i WordPress
Rullgardinsmenyer, som ibland kallas nästlade menyer, är navigeringsmenyer med överordnade och underordnade menyalternativ.
När you run markören över ett parent item, visas all child items under det i en sub-menu.
Du skapar en undermeny genom att dra ett objekt under det överordnade objektet och sedan dra det något åt höger. Det har vi gjort med 3 underobjekt under ”Tjänster” i vår meny:
You can even add multiple layers of dropdowns so that your sub-menu can have a sub-menu. Det här kan se lite rörigt ut och många themes har ej stöd för rullgardinsmenyer i flera lager.
Mer detaljer finns i vår tutorial om hur du skapar en dropdown-meny i WordPress.
Här är undermenyn live på vår demo site:
Lägga till kategorier i WordPress-menyer
Om du använder WordPress för att run en blogg, kanske du vill add your blog categories som en rullgardinsmeny i din WordPress menu.
Vi gör detta på WPBeginner och har flera kategorier som gillar nyheter, teman, tutorials och mer.
Du kan enkelt add to kategorier till din meny genom att clicka på tabben Categories på vänster sida av vyn. Du kan också behöva klicka på tabben ”View All” för att se alla dina kategorier.
Välj bara de kategorier du vill add to menyn och klicka sedan på knappen ”Add to Menu”.
Kategorierna kommer att visas som vanliga menu items längst ner i din menu.
Därefter kan du drag and drop dem i position. Vi kommer till exempel att placera all dessa kategorier under menu-item Blog.
För ytterligare instruktioner, vänligen se vår guide för nybörjare om hur man lägger till ämnen i WordPress navigation menyer.
Så här ser olika kategorier ut i navigationsmenyn på vår demo site:
Lägga till Customize Links till dina navigationsmenyer i WordPress
Förutom kategorier och sidor gör WordPress det också superenkelt att lägga till anpassade länkar i din meny. Du kan använda dem för att länka till dina profiler på sociala medier, din webbutik och andra webbplatser som du äger.
För att göra detta måste du använda tabben ”Custom Links” på vyn Menu. Lägg till länken tillsammans med den text du vill använda i din meny och klicka på knappen ”Add to Menu”.
Du kan till och med vara kreativ och lägga till ikoner för sociala medier i din meny eller i dina uppmaningsknappar för att få fler konverteringar.
Edit eller remove av ett menu-item i WordPress navigationsmenyer
När du addar pages eller categories till din custom navigation menu använder WordPress sidans titel eller kategorins namn som länktext. Du kan ändra detta om du vill.
Alla menu-items kan editeras genom att clicka på nedåtpilen bredvid.
Du kan sedan ändra menyalternativets namn härifrån. Du kan också klicka på ”Ta bort” för att ta bort länken från menyn helt och hållet.
Om du har svårt att hantera drag-and-drop-gränssnittet kan du också flytta runt menu-item genom att clicka på lämplig ”Move”-länk.
Lägga till navigeringsmenyer i Redigering av hela webbplatsen (Site Editor, Redigering av hela webbplatsen)
Den new full site editor allow dig att customize dina WordPress teman med hjälp av block editor. Den lanserades i WordPress 5.9 och aktiverar dig att add to olika block till dina templates för att skapa en unik design.
För att add a navigation menu using the full site editor, visit the Appearance ” Editor from your WordPress dashboard.
Vi kommer att använda standardtemat Twenty Twenty-Three för denna tutorial. För mer detaljer, kan du se vår artikel om de bästa WordPress Full Site Editing teman.
När du är i Editorn, gå vidare och klicka på tabben ”Navigation” för att förstora den.
Detta öppnar några new settings i den vänstra Column.
Härifrån klickar du bara på ikonen ”Edit” högst upp.
Då öppnas hela webbplatsredigeraren på skärmen, där du kan klicka på ikonen ”+” för att lägga till ett navigeringsmenyalternativ.
En prompt öppnas nu och du kan välja ett alternativ från rullgardinsmenyn.
Om du däremot vill lägga till en custom link kan du lägga till en etikett och URL för navigation menu item i block panelen. You can also add a search alternative to your menu.
När du har lagt till ett objekt växlar du till tabben ”Styles” i columnen till höger.
You can now change the typography, appearance, height, spacing, letter case, and text decoration for your menu items.
Du kan också lägga till en undermeny genom att klicka på dess ikon i blockets verktygsfält.
När du är klar kan du göra en preview av ändringarna för att se hur menyn ser ut i realtid. Glöm sedan inte att clicka på knappen ”Save” högst upp.
Lägga till WordPress-menyer i sidebar och footers
Du behöver inte bara klistra fast dig vid de locations som visas i ditt theme. Du kan add to navigation menus i alla area som använder widgetar, gillar din sidebar eller footer.
Gå bara till Appearance ” Widgets och klicka sedan på knappen ”Add Block” (+) högst upp och lägg till widgetblocket ”Navigation Menu” i din sidebar.
Lägg sedan till en Rubrik för widgeten och välj korrekt menu från dropdown-listan ”Select Menu”.
När du är klar klickar du bara på knappen ”Update”.
Här är ett exempel på en anpassad WordPress-fotmeny som byggts på vår grundare, Syed Balkhis webbplats.
Gå vidare med navigationsmenyer
Om du vill skapa en riktigt episk meny med massor av links har vi en tutorial om hur du skapar en megameny i WordPress.
Detta gör att du kan skapa en rullgardinsmeny med många objekt, inklusive bilder.
Megamenyer är ett bra alternativ om du har en stor webbplats, t.ex. en webbutik eller nyhetssajt. Den här typen av meny används av webbplatser som Reuters, Buzzfeed, Starbucks etc.
Video Tutorial
Om du föredrar att titta på den här handledningen kan du kolla in vår video nedan:
Vanliga frågor om menyer i WordPress
Här är några av de vanligaste frågorna som nybörjare ställer om navigationsmenyer i WordPress.
1. Hur addar jag en homepage-länk till en WordPress-meny?
Om du vill add to din homepage till en navigation menu måste du click the ”View All” tabs under Pages. Där kommer du att se din homepage.
Markera rutan bredvid ”Home” och klicka på ”Add to Menu”. Kom ihåg att spara dina ändringar.
2. Hur lägger jag till flera menyer för navigation i WordPress?
I WordPress kan du skapa hur många menyer som helst. För att placera en meny på din webbplats måste du lägga till den på en av ditt temas menypositioner eller i ett widgetområde, som vi visade ovan.
Om du vill add to flera menyer för navigation till din site WordPress, skapa först menyerna genom att följa vår tutorial ovan.
För att placera dem på din site klickar du på tabben ”Manage Locations”.
Härifrån kan du selecta vilken meny du gillar att visa på de locations som finns tillgängliga i your theme.
Om du vill lägga till en new menu location på din site, se vår tutorial om hur du lägger till customize navigation menus i WordPress-teman.
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till en navigation menu i WordPress. Du kanske också vill kontrollera våra guider om hur man stylar navigationsmenyer i WordPress och hur man skapar en sticky flytande navigation menu i 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.
Lindsey
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
Thank you.
I learned much knowledge.
Karen
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
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.
Administratör
Eric Wenocur
Aha, that’s how you do it! Thanks, great tutorials!
WPBeginner Support
You’re welcome, glad you like our content
saurabh
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
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
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.
Administratör
Lerissa
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
Hi Lerissa,
What happens when you click on ’View All’ under pages?
Administratör
Tom
Thanks for this illustration.
Manish Ransubhe
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
Hi Manish,
Glad you found this guide helpful. You may also want to subscribe to our YouTube Channel for WordPress video tutorials.
Administratör
Cyndi Jarvis
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
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?
Administratör
cyndi
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
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.
Administratör
Regina Clarke
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
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
Thanks for making such an easy to follow video. It helped a lot and I quickly got my issue figured out.
Bartek
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
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
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
Hi John,
You may want to check out our tutorial on how to add custom navigation menus in WordPress.
Administratör
Shibani
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
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
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.
Administratör
John
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
Have tried a different themes? Sometime the themes you are using is not supported to some of these futures.
Ike Ezeani
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
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
Hi, Thanks for the nice detailed explanation of adding menu, but how to call this menu ????
Husnaa
Thanks for helping me out.
Keep helping others.
Lucy
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
Hi Lucy,
Please see our article on how to add a menu item without linking to a page.
Administratör
David Blaska
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
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
Thank you so much for this, been trying to figure out how to create drop down menus, this really helped!
isa alshabany
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
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
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
How can I add a drop down menu in an area of a page other than my sidebar widget?
Mary
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
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
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
super to quickly understand
Lucas Phan
Hey bro, i have a question for you.
How to create side menu like this
thank bro.
WPBeginner Support
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.
Administratör
Zac
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
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
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
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
thanks for the guide and how to create the catagerious (if you know please create the video)
Deepak Raghav
Hello Sir, I wan t to create more navigation menu in my wordpress themes. Please tell me how to add more
Dylan
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
Great-thank you sooooo much for making it so succibt, precise, clear and understandable!!!
Rafi sultan
Really nice ,every step s defined clearly ,nice material.
thanks
Carrie
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
This helped me so much! Thank you! Thank you! Thank you!
lisa thomson
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
Hi, Thanks for the nice detailed explanation of adding menu, it really helped me
khalid mehmood
It really helped.
thanks.
Laxmikant Bhumkar
Super excellent information on a navigation menu. Very easy to learn.
Chirag
Really nice. Go it very easily. Thank you a lot!
You Rock
pinku
very very useful information…now it is easy to create navigation menu
thanks a lot
Sheryl Roger
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
Nice article.
Thanks!