Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Så här addar du en navigation menu i WordPress (Beginner’s Guide)

Vill du add to en navigation menu till din site i WordPress?

WordPress levereras med ett drag and drop-menygränssnitt som du kan använda för att skapa header-menyer, menyer med alternativ för dropdown och mycket mer.

I denna Step-by-Step guide visar vi dig hur du enkelt kan add to en navigation menu i WordPress.

How to Add Navigation menu in WordPress

Vad är en navigation menu?

En navigation menu är en lista med länkar som pekar till viktiga areas på en website. De presenteras vanligtvis som en horisontell stapel med links högst upp på varje page på en WordPress site.

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:

WPBeginner navigation menu example

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.

Till exempel kommer de flesta WordPress themes med en primär menu som visas högst upp. Vissa themes kan även innehålla en sekundär meny, en footer-meny eller en mobil navigation menu.

Med detta sagt, låt oss se hur du kan skapa en customize navigation menu i WordPress.

Video Tutorial

Subscribe to WPBeginner

Om du föredrar skriftliga instruktioner är det bara att fortsätta läsa

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.

Create a new menu

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:

Newly created menu in WordPress

Därefter kan du välja de pages som du vill add to menyn. Du kan antingen automatiskt lägga till alla nya sidor på högsta nivån eller välja specifika pages i den vänstra colonnen.

Först klickar du på tabben ”View All” för att se alla pages på din site. Därefter klickar du i boxen bredvid varje page som du vill add to din meny och klickar sedan på knappen ”Add to Menu”.

Add pages to your menu

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 you ändra order och omorganisera dem.

Drag and drop pages in the menu

Note: Alla menyer har sina objekt listade i en vertikal (uppifrån och ned) lista i menu-item editorn. När du lägger upp menyn live på din site visas den antingen vertikalt eller horisontellt (från vänster till höger), beroende på vilken location 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 pages i menyn väljer du den location där du vill visa menyn och klickar på knappen ”Save Menu”.

Select menu location

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:

Menu preview

Skapa rullgardinsmenyer i WordPress

Rullgardinsmenyer, även anropade som nästlade menyer, är navigationsmenyer med parent- och child menu items.

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. Vi har gjort det med 3 underobjekt under ”Tjänster” i vår menu:

Creating a submenu

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:

Submenu preview in WordPress

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.

Category menu on WPBeginner

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”.

Select categories to add

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.

Drag the categories under the main menu

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:

Blog categories in navigational menu

Notis: Förutom kategorier och pages, gör WordPress det också superenkelt att add to custom links till din menu. Du kan använda dem för att links till dina profiler på social media, din store och andra websites 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”.

Add a custom link

Du kan till och med vara kreativ och add to social media icons i din menu eller call-to-action knappar 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.

Edit or remove menu item

Härifrån kan du sedan ändra namnet på menu-item. Det är också här du kan clicka på ”Remove” för att ta bort länken från din menu 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.

Expand the navigation tab

Detta öppnar några new settings i den vänstra Column.

Härifrån klickar du bara på ikonen ”Edit” högst upp.

Click the Edit icon in the FSE

Detta kommer att starta hela Site Editor på din vy där du kan clicka på ”+” icon för att add to ett navigation menu item.

En prompt öppnas nu och du kan välja ett alternativ som visas i dropdown-menyn.

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.

Add a navigation menu item in the full site editor

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.

Om du vill lägga till en undermeny kan du också göra det genom att clicka på dess icon i blockets toolbar.

Customize the menu item by switching to the styles block

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.

Add a navigation menu

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”.

Add a title and select your menu

Här är ett exempel på en custom WordPress footer menu built-in på Syed Balkhi’s website.

Navigational menu preview

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 images.

Mega menu preview

Mega menus är ett bra alternativ om du har en stor site, till exempel en online store eller en news site. Den här typen av menyer används av webbplatser som gillar Reuters, Buzzfeed, Starbucks, etc.

Vanliga frågor om menyer i WordPress

Här är några av de vanligaste frågorna vi får om WordPress menyer för navigation från nybörjare.

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.

Kontrollera boxen bredvid ”Home” och click ”Add to Menu”. Glöm inte att save your changes.

Add homepage to menu

2. Hur lägger jag till flera menyer för navigation i WordPress?

I WordPress kan du skapa så många menyer som du gillar. För att placera en meny på din website måste du add to en av ditt temas menu locations, eller till ett widgetar area 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”.

Manage menu 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.

Avslöjande: Vårt innehåll stöds av våra läsare. Det innebär att om du klickar på några av våra länkar, kan vi tjäna en provision. Se hur WPBeginner finansieras, varför det är viktigt, och hur du kan stödja oss. Här är vår editoriala process.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Den ultimata WordPress-verktygslådan

Få GRATIS tillgång till vår verktygslåda - en samling WordPress-relaterade produkter och resurser som varje professionell användare bör ha!

Reader Interactions

117 kommentarerLämna ett svar

  1. 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!

  2. Dennis Muthomi says

    what your thoughts are on having a sticky navigation menu? do recommend having a sticky one or an nonstick one?

    • WPBeginner Support says

      It is mostly a question of personal preference. There is not specifically better option between the two. At the moment we use a static menu instead of sticky :)

      Administratör

  3. Dayo Olobayo says

    This was exactly what I needed. I’ve been wanting to make my website look more professional and adding a navigation menu is a big part of that. Thanks for the clear instructions!

  4. Jiří Vaněk says

    Regarding adding pages to the menu, don’t know how to solve the search problem? Or if you haven’t met him. I have a website where there are currently about 600 pages, which are mainly used for dictionary purposes. The problem is, when I want to add one of the pages to the menu, I write its link in the search, so wordpress does not find it and I have to first display all and find it alphabetically. It delays my work quite a bit and I haven’t figured out where the problem is.

    • WPBeginner Support says

      You would want to try writing the title of the page, otherwise you could use custom links and link to the page if you have the URL directly.

      Administratör

      • Jiří Vaněk says

        Yes, I do. I type the site name into the search box and WordPress lists similar sites, but usually not the one I’m looking for. So I will search further where the problem might be.

  5. David Keevis says

    Thanks so much for a really excellent tutorial. We’re building our site with multiple CPT’s and this post clearly explained what was needed. Had it implemented in a couple minutes. We’re using Generate Press/Generate Blocks and the query loop is exceptionally powerful. Y’all just made our day!!!!

  6. NPH LLC says

    If I ”remove” a link within my main navigation menu, can I bring it back easily? We want to take a page offline while we are reconfiguring it.

    Thanks!

    • WPBeginner Support says

      Yes, you can easily add and remove menu items and if the menu items even if the item is not currently on the menu. You would want to ensure you clear any caching on your site so your visitors see the up-to-date menu.

      Administratör

  7. Sunny says

    A very basic question. How can you link your website URL to your homepage? Meaning, having the website URL, also as your homepage section in the menu. Thanks

    • WPBeginner Support says

      You could either set the menu to the homepage you have set under Settings>General for your site or create a custom URL and add your domain there to point to your homepage.

      Administratör

  8. Lisa says

    I’m confused about how to get my posts where I want them to go… I have a recipe blog. On the top of my site, I have categories you can click such as ”Dinner recipes” and ”Side dishes”… How do I get my specific posts to go on those specific pages when you click on the title at the top of the page?

  9. HJ says

    Very basic question, but how to enable menu on a subpage? I designed some subpages, but the menu is not visible on top. In my main pages the menu is visible. How to enable the menu to make it visible on the sub-pages?

    • WPBeginner Support says

      You would want to reach out to the support for your specific theme, it sounds like your theme may remove the menu for certain pages. If you reach out to the support they should let you know how to add the menu back.

      Administratör

  10. Janien says

    I’m trying to get a navigation menu that is sticky and is not transparent. I’ve tried everything. Am I allowed to change the navigation bar in a theme?

    • WPBeginner Support says

      You are but it would require some coding knowledge, we would recommend reaching out to your theme’s support and they can normally assist.

      Administratör

  11. Miranda says

    I have made a navigation menu but it won’t show up on the mobile site and when I go to navigation menu settings it does not have mobile menu as an option. Do you know how I can fix this or do I need to find a different theme?

    • WPBeginner Support says

      You would need to reach out to the support for your specific theme for it not displaying properly and they would be able to assist.

      Administratör

  12. atta says

    Thanks for the detailed guide. I have a question: how can we add a navbar (for a landing page) which links the landing page sections/elements instead of navigating to other pages. An example is Wikipedia. On any Wikipedia page, you can click on the name of the section and it will immediately go down to that section.

  13. Gina says

    Hi,

    I created categories and added to my menu so that once a reader clicks they can find all the blog posts on that category. My problem is that I don’t want the blog name to appear at the top of the page, that is, Blogging category => Blogging category description => blog posts, how do I remove that?

    • WPBeginner Support says

      That would depend on your specific theme’s styling. If you reach out to your theme’s support they should be able to assist with changing what is shown

      Administratör

    • WPBeginner Support says

      You would want to ensure your site or your hosting provider does not have a cache that could be causing your issue.

      Administratör

  14. Linda McMillan says

    Hello, I am using Elementor and OceanWP. I set up a custom link in my menu so that when clicking on it goes to the Home page. How can I make it go instead of just to the Home page, but down the page to a certain section? I appreciate your help.

  15. Annie says

    Pretty much there with the navigation. One question though, I have one point in my navigation ”products” from there it splits into 3 other sections (drop down menu coming up). I don’t want visitors be able to access this product page as it will be empty, I want them to choose directly from the drop down menu instead of accessing the products page first. So products will be still displayed in the navigation but will be inaccessible, visitors have to click onto the drop down menu to choose what they are after. How do I do this? I m I m removing the whole products section it wont be displayed in the navi anymore, how can I make the products page inaccessible?

    • WPBeginner Support says

      You can create a custom link under Appearance>Menus titled Products and link it to either a different page or # which should keep the users on the same page they are on.

      Administratör

  16. Natalie V says

    Hi! Thanks so much for this post. It helped me a lot. I have the ”Karuna” theme. Whenever I add more menu options (I have 4) they are displayed in two row. I would like them all to be in one row. Is there a way to fix this? Thank you so much!

  17. David says

    Needed to link a buy now button to woo commerce cart page. Spent two days going in circles. Tried to contact woo with little success. Then found you guys who helped solve the problem.
    Often it is the little things which can stop us in our tracks. A big thank you for the simplified set of clear instructions.

  18. Elliot Kershaw says

    Hello,

    I am making a website with Ocean WP and Elementor, however I am unable to see the menu at the top of all of my pages. It only appears at the top of the home page. So people can navigate to any page from the home page, however if anyone wanted to navigate back to the home page or to another page from there, it would tricky. Do you have a solution for this? Thank you!

  19. 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?

  20. 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

  21. 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.)

  22. 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.

      Administratör

  23. 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

  24. 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.

  25. 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?

      Administratör

    • 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.

        Administratör

  26. 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.

  27. 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.

  28. Amber Shock says

    Thanks for making such an easy to follow video. It helped a lot and I quickly got my issue figured out.

  29. 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?

  30. 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.

  31. 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.

  32. 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.

  33. 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.

      Administratör

  34. 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.

  35. 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.

  36. 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?

  37. 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

  38. 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.

Lämna ett svar

Tack för att du väljer att lämna en kommentar. Tänk på att alla kommentarer modereras enligt våra policy för kommentarer, och din e-postadress kommer INTE att publiceras. Vänligen använd INTE nyckelord i namnfältet. Låt oss ha en personlig och meningsfull konversation.