{"id":25062,"date":"2020-07-15T09:32:00","date_gmt":"2020-07-15T13:32:00","guid":{"rendered":"https:\/\/www.boldgrid.com\/support\/?p=25062"},"modified":"2020-09-23T10:41:20","modified_gmt":"2020-09-23T14:41:20","slug":"how-to-create-a-navigation-menu-in-wordpress-step-by-step","status":"publish","type":"post","link":"https:\/\/www.boldgrid.com\/support\/wordpress-tutorials\/how-to-create-a-navigation-menu-in-wordpress-step-by-step\/","title":{"rendered":"How to Create a Navigation Menu in WordPress – Step by Step"},"content":{"rendered":"\n

After creating all your pages and posts you will want to add a navigation menu. Menus make browsing your website easier, and helps you direct users where you want them to go.<\/p>\n

You can create a navigation menu in WordPress from the WordPress dashboard. The default drag and drop interface allows you to easily rearrange and nest links to create drop-down menus.<\/p>\n

What is a Navigation Menu?<\/h2>\n
A navigation menu is a list of links styled to match the theme. These links can be to internal pages and posts on your website, or external to other sites like Facebook.<\/p>\n
For example, on WordPress.org the words below the logo and to the left of the blue button is the navigation menu.<\/p>\n
$\"WordPress$ <\/p>\n
While the exact location of your navigation menu will depend on the theme, the main menu is most commonly found in the header on every page and post on your website. Only the most important areas of your website should be in this menu, it doesn’t need to be every page and post.<\/p>\n
Many themes provide additional menu locations, such as the footer. A footer menu can be helpful so the user doesn’t have to scroll back up to the top to find where to go next on your site.<\/p>\n

How to Create a Navigation Menu in WordPress<\/h2>\n
Ready to create a navigation menu in WordPress? Click on Appearance > Menus<\/b>, give your menu a name (in our case we used Main Menu), then click the blue Create Menu <\/b>button on the right side of the screen.<\/p>\n
$\"Create$ <\/p>\n
Now you are ready to start adding links. On the left side you will see the types of links you can add – Pages, Posts, Custom Links, and Categories. The most recently created Pages and Posts show first, but you can click the other tabs to View All<\/b> or Search<\/b> if you have a large site.<\/p>\n
Let’s start by adding a few pages. Check the box next to the page title you’d like to add, or check Select All, and then click the Add to Menu button.<\/p>\n
$\"Add$ <\/p>\n
We now have the selected pages in our menu! If you need to re-order them, simply drag and drop into the correct order. Keep in mind when you create a navigation menu in WordPress, the links will appear vertical for ease of use. On the front end of your website, most menus are displayed horizontally and the top link in the list appears first in the row.<\/p>\n
$\"Reorder$ <\/p>\n
If you would prefer not to drag and drop, you can instead click the drop-down arrow to open each panel and use the Move<\/strong> links under the Navigation Label textbox. Remember that most websites display menus horizontally, so moving a link up in this list will move it to the left on the front end and moving it down in this list will move it to the right on the front end. The option to move Under<\/strong> is for creating drop-down menus which we will cover later in this article, so for now only use the other options.<\/p>\n
$\"WordPress$ <\/p>\n
Next, we need to tell WordPress where to put this menu. The number and locations available depends on the theme. Today we are using the default Twenty Twenty theme so there are 5 locations available.<\/p>\n
$\"Add$ <\/p>\n
The Desktop Horizontal Menu is the main menu location for Twenty Twenty, so we’ve assigned it there. Click the blue Save Menu<\/b> button and your menu will be live in the selected location! If you are unsure where the menu locations appear in your theme, we recommend saving the menu in each location then viewing on the front end. This is how the menu looks on Twenty Twenty in the Desktop Horizontal Menu location.<\/p>\n
$\"WordPress$ <\/p>\n

Add Custom Links to WordPress Navigation Menu<\/h2>\n
Now that you know how to create a navigation menu in WordPress with pages and posts, you may want to add links that go somewhere other than your website. WordPress provides a way to do this with Custom Links<\/b>.<\/p>\n
Click the drop-down arrow to the right of Custom Links to open the panel. Simply enter the website address of where the user should go and the text you want to appear in the navigation menu for that link. In this example, we added a link to Facebook. Be sure to include the entire URL in the box – don’t forget the https:\/\/www. before the domain name. Click the Add to Menu<\/strong> button and the new link will appear at the bottom of your menu list.<\/p>\n
$\"Add$ <\/p>\n
If needed drag and drop into the correct spot in the menu, and then click the blue Save Menu<\/strong> button to finalize your changes. When we view the site on the front end, the Facebook link is now in the menu.<\/p>\n
$\"WordPress$ <\/p>\n
Create a Drop-Down Navigation Menu in WordPress<\/h2>\n
If you want to add a lot of links to your menu, you may want to create a drop-down navigation menu in WordPress. Drop-down menus, also known as nested menus, are comprised of top level items with sub items. Each set of sub items only appear when the user hovers over the top level item. In this example we nested Post 1, Post 2, and Post 3 under About to create a drop-down.<\/p>\n
$\"create$ <\/p>\n
To nest the sub item panels correctly, drag and drop them under and slightly to the right of the desired top level item. It may be easier to click the drop-down arrow on the right to open the panel and use the Move<\/strong> text links. This is when you would use the Under<\/strong> option – in this example we clicked a text link that said Under About to move them to the right. If you accidentally move the wrong one, click Out from under<\/strong> (item) in the Move options.<\/p>\n
After saving the changes, our menu looks like this when hovering over About.<\/p>\n
$\"create$ <\/p>\n
There is now a drop-down menu on your website! You can add sub items to additional top level items if you’d like by repeating this process.<\/p>\n
You can also create multiple levels of sub items, as shown here. Under Blog we have two sub items – Category 1 and Category 2. Then Category 1 and Category 2 each have 2 sub items of their own.<\/p>\n
$\"Multi-level$ <\/p>\n
The front end result is this:<\/p>\n
$\"\"$ <\/p>\n
Create a Navigation Menu in WordPress Widget<\/h2>\n
If you’d like to display a menu in a sidebar or other widget enabled area, you can do so from Appearance > Widgets<\/strong>. On the left you will see all the Available Widgets you can add. On the right you will see your theme’s available widget locations, which will vary per theme. Twenty Twenty has two Footer locations available.<\/p>\n
We’ve added the Navigation Menu widget to Footer #1 by dragging and dropping from the left into the panel. From the Select Menu<\/strong> drop-down, select the menu you’d like to display and click Save<\/strong>.<\/p>\n
$\"create$ <\/p>\n
View the front end of your site to see the new menu. Generally widget menus are displayed vertically instead of horizontally.<\/p>\n
Frequently Asked Questions<\/h2>\n
How many navigation menus do I need?<\/h3>\n
The number of navigation menus you want to have on your website will depend on what kind of site it is. One page sites don’t need a menu at all! Every multi-page website should have one menu, most commonly in the header. With more complex websites, it’s not uncommon to have a menu in the header, footer, and sidebar. We recommend adding a footer menu as well, to help users continue exploring your website.<\/p>\n
What should be in my navigation menu?<\/h3>\n
You do not need to add every page and post to any of your navigation menus. For example, you may have a privacy page only shown at checkout. This page should not appear in a menu. Only the top level pages you definitely want your users to see should be in the main navigation menu. You can always link directly from one page to another.<\/p>\n
What should I name my Navigation Menu Links?<\/h3>\n
By default the link text in the navigation menu will be the page or post title. If you want to use something different, simply type the new text in the box. In this example, we entered New Title instead of About. You can tell it is still the About page because it says Original: About<\/strong> under the Move options.<\/p>\n
$\"Custom$ <\/p>\n
How do I remove a Link from the Navigation Menu?<\/h3>\n
If you no longer want a link in your navigation menu, click the drop-down arrow next to the title to open the panel. Then click the red Remove<\/strong> text and the panel will disappear. Click the blue Save Menu button to make the change live on the front end of your site.<\/p>\n
$\"delete$ <\/p>\n
Congratulations! You now can create a navigation menu in WordPress!<\/h4>\n<\/body><\/html>\n","protected":false},"excerpt":{"rendered":"
After creating all your pages and posts you will want to add a navigation menu. Menus make browsing your website easier, and helps you direct users where you want them to go. You can create a navigation menu in WordPress from the WordPress dashboard. The default drag and drop interface allows you to easily rearrange […]<\/p>\n","protected":false},"author":215,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"bgseo_title":"How to Create a Navigation Menu in WordPress - Step by Step","bgseo_description":"After creating all your pages and posts you will want to add a navigation menu to make browsing your website easier. You can create a navigation menu in WordPress from the WordPress dashboard using a default drag and drop interface.","bgseo_robots_index":"index","bgseo_robots_follow":"follow","footnotes":""},"categories":[151],"tags":[],"class_list":["post-25062","post","type-post","status-publish","format-standard","hentry","category-wordpress-tutorials"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/25062","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/users\/215"}],"replies":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/comments?post=25062"}],"version-history":[{"count":27,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/25062\/revisions"}],"predecessor-version":[{"id":27382,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/25062\/revisions\/27382"}],"wp:attachment":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/media?parent=25062"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/categories?post=25062"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/tags?post=25062"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}