{"id":35726,"date":"2024-04-14T10:27:24","date_gmt":"2024-04-14T10:27:24","guid":{"rendered":"https:\/\/10web.io\/blog\/?p=35726"},"modified":"2024-04-24T12:02:16","modified_gmt":"2024-04-24T12:02:16","slug":"how-to-add-menu-in-wordpress","status":"publish","type":"post","link":"https:\/\/10web.io\/blog\/how-to-add-menu-in-wordpress\/","title":{"rendered":"How to Add a Menu in WordPress: An A-Z Guide"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">In WordPress, menus are an important navigation tool that helps website visitors quickly find the information they are looking for. They are located in the header, footer, or sidebar sections of your website and contain links that point to specific sections. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Menus guide your users through your content and can significantly enhance the usability and functionality of your site. WordPress allows you to customize menus to suit your website\u2019s needs and your audience\u2019s preferences.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In this A-Z guide, we will discuss how to add a menu in WordPress websites and provide your audience with a good user experience. Following a few simple steps, you&#8217;ll have a fully functional navigation menu tailored to your site&#8217;s unique style.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">WordPress menu basics<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Besides providing structure to your site, menus serve as a quick attention grabber for important information, by customizing the menus you create. WordPress offers a variety of navigation menus to fit different design needs. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">The two primary types are:<\/span><\/p>\n<p><b>Primary menus<\/b><span style=\"font-weight: 400;\">: The main navigation system is usually located at the top of your website. It&#8217;s the first element users interact with to browse through the major sections of your site. For instance, Home, About Us, Services, Shop, etc.<\/span><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Header-menu.jpg\" alt=\"Header menu example in WordPress.\" width=\"1920\" height=\"1080\" class=\"alignnone wp-image-35732 size-full\" srcset=\"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Header-menu.jpg 1920w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Header-menu-742x416.jpg 742w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Header-menu-1484x835.jpg 1484w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Header-menu-150x84.jpg 150w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Header-menu-768x432.jpg 768w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Header-menu-1536x864.jpg 1536w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Header-menu-371x208.jpg 371w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Header-menu-600x338.jpg 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/p>\n<p><b>Secondary menus<\/b><span style=\"font-weight: 400;\">: These can include footer menus, social links, or any additional navigational structures that support the primary menu. They&#8217;re typically used for supplementary navigation and not for the website\u2019s main content sections.<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Footer-menu.jpg\" alt=\"Footer menu example in WordPress.\" width=\"1920\" height=\"1080\" class=\"alignnone wp-image-35731 size-full\" srcset=\"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Footer-menu.jpg 1920w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Footer-menu-742x416.jpg 742w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Footer-menu-1484x835.jpg 1484w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Footer-menu-150x84.jpg 150w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Footer-menu-768x432.jpg 768w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Footer-menu-1536x864.jpg 1536w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Footer-menu-371x208.jpg 371w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Footer-menu-600x338.jpg 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/span><\/p>\n<p><span style=\"font-weight: 400;\">With an understanding of the importance of WordPress menus and the types that there are, let\u2019s learn how to add a menu in WordPress.<\/span><\/p>\n\r\n<style>\r\n  #ctablocks_inline_92{\r\n          background-color: #000000;\r\n        color: #ffffff;\r\n    border-radius: 6px;\r\n  }\r\n\r\n  #ctablocks_inline_92 p{\r\n    color: #ffffff;\r\n  }\r\n  #ctablocks_inline_92 .button{\r\n        background-color: rgb(51,57,241);\r\n      color: #ffffff;\r\n    border-color: #3339f1 !important;\r\n  }\r\n  #ctablocks_inline_92 .button:hover{\r\n    background: rgba(51,57,241,0.8);\r\n    color: #ffffff;\r\n    opacity: 1;\r\n  }\r\n        #ctablocks_inline_92 .ctablocks_content_info p {\r\n        padding-left: 36px;\r\n      }\r\n      #ctablocks_inline_92 .ctablocks_content_button {\r\n          margin-left: 37px;\r\n      }\r\n  @media screen and (min-width: 768px) and (max-width: 1260px) {\r\n      #ctablocks_inline_92 .ctablocks_content_button {\r\n          margin-left: 37px !important;\r\n      }\r\n  }\r\n  ;\r\n<\/style>\r\n<div id=\"ctablocks_inline_92\" class=\"ctablocks_container inline_type\r\n        \">\r\n\r\n  <div class=\"ctablocks_content clear\">\r\n    <div class=\"ctablocks_content_info\">\r\n      \r\n            <div class=\"title-wrap\">\r\n\t\t\t\t\t                  <img decoding=\"async\" src=\"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/info-icon-cta.png\" alt=\"Simplify WordPress with 10Web\" title=\"Simplify WordPress with 10Web\">\r\n\t\t\t\t\t            <h4>Simplify WordPress with 10Web<\/h4>\r\n        <\/div>\r\n              <p>Automate manual work with 10Web Managed WordPress Hosting and 10Web AI Website Builder. Optimize your WordPress website effortlessly. <\/p>\r\n          <\/div>\r\n    <div class=\"ctablocks_content_button\">\r\n              <a href=\"https:\/\/10web.io\/ai-website-builder\/\" class=\"button\" data-gtag=\"sign-up-blog\" data-buttontype=\"sign-up\" data-gtag=\"cta-92\" data-buttontype=\"cta-inline\"\r\n\t        >Learn How<\/a>\r\n            \r\n    <\/div>\r\n  <\/div>\r\n    <\/div>\r\n\n<h2><span style=\"font-weight: 400;\">How to add menus in WordPress<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Adding menus you have the freedom to structure your site&#8217;s navigation according to your preferences. Working from the WordPress dashboard you are flexible to create various types of menus. Let\u2019s discuss adding menus for different purposes and customizing them accordingly.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Creating a primary menu in WordPress<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">To create a new primary menu, go to your WordPress dashboard &gt; <\/span><b>Appearance <\/b><span style=\"font-weight: 400;\">&gt; <\/span><b>Menus<\/b><span style=\"font-weight: 400;\">. Here, click on <\/span><b>Create Menu<\/b><span style=\"font-weight: 400;\">. It&#8217;s essential to name your menu for easy identification\u2014this is visible to you, not your site visitors. <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Adding-menu-in-WordPress.jpg\" alt=\"Adding menu in WordPress.\" width=\"1920\" height=\"1080\" class=\"alignnone wp-image-35727 size-full\" srcset=\"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Adding-menu-in-WordPress.jpg 1920w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Adding-menu-in-WordPress-742x416.jpg 742w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Adding-menu-in-WordPress-1484x835.jpg 1484w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Adding-menu-in-WordPress-150x84.jpg 150w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Adding-menu-in-WordPress-768x432.jpg 768w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Adding-menu-in-WordPress-1536x864.jpg 1536w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Adding-menu-in-WordPress-371x208.jpg 371w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Adding-menu-in-WordPress-600x338.jpg 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/span><\/p>\n<p><span style=\"font-weight: 400;\">After naming it, you can begin adding pages, categories, or custom links by selecting items and pressing <\/span><b>Add to Menu<\/b><span style=\"font-weight: 400;\">. Once you&#8217;ve arranged your items, save your changes.<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Creating-a-menu-in-WordPress.jpg\" alt=\"Creating a menu in WordPress\" width=\"1920\" height=\"1080\" class=\"alignnone wp-image-35728 size-full\" srcset=\"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Creating-a-menu-in-WordPress.jpg 1920w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Creating-a-menu-in-WordPress-742x416.jpg 742w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Creating-a-menu-in-WordPress-1484x835.jpg 1484w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Creating-a-menu-in-WordPress-150x84.jpg 150w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Creating-a-menu-in-WordPress-768x432.jpg 768w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Creating-a-menu-in-WordPress-1536x864.jpg 1536w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Creating-a-menu-in-WordPress-371x208.jpg 371w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Creating-a-menu-in-WordPress-600x338.jpg 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Creating a secondary menu in WordPress<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Secondary menus, often used for footer navigation or secondary pages, are set up similarly. After you&#8217;ve created a new menu like your primary one, assign it to a secondary menu location which is often defined by your theme.<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Creating-a-secondary-menu-in-WordPress.jpg\" alt=\"Creating a secondary menu in WordPress\" width=\"1920\" height=\"1080\" class=\"alignnone wp-image-35729 size-full\" srcset=\"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Creating-a-secondary-menu-in-WordPress.jpg 1920w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Creating-a-secondary-menu-in-WordPress-742x416.jpg 742w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Creating-a-secondary-menu-in-WordPress-1484x835.jpg 1484w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Creating-a-secondary-menu-in-WordPress-150x84.jpg 150w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Creating-a-secondary-menu-in-WordPress-768x432.jpg 768w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Creating-a-secondary-menu-in-WordPress-1536x864.jpg 1536w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Creating-a-secondary-menu-in-WordPress-371x208.jpg 371w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Creating-a-secondary-menu-in-WordPress-600x338.jpg 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Creating a dropdown menu in WordPress<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">To create a dropdown menu in WordPress, go to <\/span><b>Appearance<\/b><span style=\"font-weight: 400;\"> &gt; <\/span><b>Menus<\/b><span style=\"font-weight: 400;\"> in your dashboard. Here you&#8217;ll create or select the menu to edit.<\/span><\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ol class=\"black\">\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Click on \u2018<\/span><b>+ Add Items<\/b><span style=\"font-weight: 400;\">\u2019 to introduce new elements to your menu structure.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Position the items by dragging them into the desired order. Submenu items nest under parent items, creating your dropdown structure.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Pull the item slightly to the right under the parent item to transform it into a submenu entry.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Preview and save.<\/span><\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">When deciding on a parent item for your dropdown, ensure it is a static link if your theme doesn&#8217;t support clickable parent menu items. It&#8217;s crucial for the parent item to be non-functional to make the dropdown accessible.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Customize the appearance of the dropdown by selecting the individual items and adjusting their Navigation Label or CSS Classes under the \u2018<\/span><b>Screen Options<\/b><span style=\"font-weight: 400;\">\u2019.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you use the Block Editor, menus may derive from the Navigation block. Adjustments can then be made in the <\/span><b>Site Editor<\/b><span style=\"font-weight: 400;\">.<\/span><\/p>\n\r\n<style>\r\n  #ctablocks_inline_92{\r\n          background-color: #000000;\r\n        color: #ffffff;\r\n    border-radius: 6px;\r\n  }\r\n\r\n  #ctablocks_inline_92 p{\r\n    color: #ffffff;\r\n  }\r\n  #ctablocks_inline_92 .button{\r\n        background-color: rgb(51,57,241);\r\n      color: #ffffff;\r\n    border-color: #3339f1 !important;\r\n  }\r\n  #ctablocks_inline_92 .button:hover{\r\n    background: rgba(51,57,241,0.8);\r\n    color: #ffffff;\r\n    opacity: 1;\r\n  }\r\n        #ctablocks_inline_92 .ctablocks_content_info p {\r\n        padding-left: 36px;\r\n      }\r\n      #ctablocks_inline_92 .ctablocks_content_button {\r\n          margin-left: 37px;\r\n      }\r\n  @media screen and (min-width: 768px) and (max-width: 1260px) {\r\n      #ctablocks_inline_92 .ctablocks_content_button {\r\n          margin-left: 37px !important;\r\n      }\r\n  }\r\n  ;\r\n<\/style>\r\n<div id=\"ctablocks_inline_92\" class=\"ctablocks_container inline_type\r\n        \">\r\n\r\n  <div class=\"ctablocks_content clear\">\r\n    <div class=\"ctablocks_content_info\">\r\n      \r\n            <div class=\"title-wrap\">\r\n\t\t\t\t\t                  <img decoding=\"async\" src=\"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/info-icon-cta.png\" alt=\"Simplify WordPress with 10Web\" title=\"Simplify WordPress with 10Web\">\r\n\t\t\t\t\t            <h4>Simplify WordPress with 10Web<\/h4>\r\n        <\/div>\r\n              <p>Automate manual work with 10Web Managed WordPress Hosting and 10Web AI Website Builder. Optimize your WordPress website effortlessly. <\/p>\r\n          <\/div>\r\n    <div class=\"ctablocks_content_button\">\r\n              <a href=\"https:\/\/10web.io\/ai-website-builder\/\" class=\"button\" data-gtag=\"sign-up-blog\" data-buttontype=\"sign-up\" data-gtag=\"cta-92\" data-buttontype=\"cta-inline\"\r\n\t        >Learn How<\/a>\r\n            \r\n    <\/div>\r\n  <\/div>\r\n    <\/div>\r\n\n<h3><span style=\"font-weight: 400;\">Creating menu categories in WordPress<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">When managing your WordPress website, organizing content into <\/span><b>menu categories<\/b><span style=\"font-weight: 400;\"> can make user navigation easier.<\/span><\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ol class=\"black\">\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Log into your WordPress dashboard. Go to <\/span><span style=\"font-weight: 400;\">Appearance <\/span><span style=\"font-weight: 400;\">&gt; <\/span><span style=\"font-weight: 400;\">Menus<\/span><span style=\"font-weight: 400;\">. <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Identify your <\/span><b>Main Menu<\/b><span style=\"font-weight: 400;\">. If it&#8217;s not already created, select <\/span><b>Create a new menu<\/b><span style=\"font-weight: 400;\">.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Look for the <\/span><b>Categories<\/b><span style=\"font-weight: 400;\"> box on the left-hand side.<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Creating-categories-in-WordPress.jpg\" alt=\"Creating categories in WordPress\" width=\"1920\" height=\"1080\" class=\"alignnone wp-image-35730 size-full\" srcset=\"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Creating-categories-in-WordPress.jpg 1920w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Creating-categories-in-WordPress-742x416.jpg 742w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Creating-categories-in-WordPress-1484x835.jpg 1484w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Creating-categories-in-WordPress-150x84.jpg 150w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Creating-categories-in-WordPress-768x432.jpg 768w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Creating-categories-in-WordPress-1536x864.jpg 1536w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Creating-categories-in-WordPress-371x208.jpg 371w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Creating-categories-in-WordPress-600x338.jpg 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Choose which categories you&#8217;d like to add by checking the corresponding boxes.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Hit the <\/span><b>Add to Menu<\/b><span style=\"font-weight: 400;\"> button.<\/span><\/li>\n<\/ol>\n<\/li>\n<li style=\"list-style-type: none;\">\n<ol><\/ol>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Once added, you can <\/span><b>drag and drop<\/b><span style=\"font-weight: 400;\"> the categories within the menu structure to order them to your preference. This is done on the right side of the menu editor screen.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">How to customize menu appearance<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Now you know how to add a menu in WordPress for different purposes. Mastering the appearance of your WordPress menu will increase your website&#8217;s usability and aesthetic appeal. It&#8217;s essential to align your menu&#8217;s design with your site&#8217;s overall style and functional requirements.<\/span><\/p>\n<p><b>Themes: <\/b><span style=\"font-weight: 400;\">the theme you choose significantly influences your menu&#8217;s appearance. Themes in WordPress often come with predefined menu locations and styles. Ensure you select a WordPress theme that supports custom menus and includes options for header and footer menu placements. Some themes offer additional sidebar options, providing flexibility in how your menu integrates with the rest of your site&#8217;s layout.<\/span><\/p>\n<p><b>Menu locations: <\/b><span style=\"font-weight: 400;\">Your theme determines available menu locations where you can display your menus, such as the header, footer, or sidebar. Go to <\/span><b>Appearance <\/b><span style=\"font-weight: 400;\">&gt; <\/span><b>Menus <\/b><span style=\"font-weight: 400;\">in your dashboard to assign your custom menu to one of these locations. Proper menu location and alignment can impact the navigation flow and overall layout of your site.<\/span><\/p>\n<p><b>Widgets and plugins: <\/b><span style=\"font-weight: 400;\">Widgets and plugins expand your customization options beyond what&#8217;s available in the theme. Add menus to your sidebar through <\/span><b>Appearance <\/b><span style=\"font-weight: 400;\">&gt; <\/span><b>Widgets <\/b><span style=\"font-weight: 400;\">by dragging and dropping the <\/span><b>Navigation Menu<\/b><span style=\"font-weight: 400;\"> widget into your chosen area. Plugins can add sophisticated features like mega menus, responsive designs, and more intricate control over typography and background color. <\/span><\/p>\n<h2><span style=\"font-weight: 400;\">How to add links to your WordPress navigation menu<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">You\u2019ve learned how to add a menu in WordPress. After you\u2019ve created your WordPress menus, you can add links to them. The process is easy and consists of a few simple steps. <\/span><\/p>\n<ol class=\"black\">\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">From your WordPress dashboard go to the <\/span><b>Appearance <\/b><span style=\"font-weight: 400;\">&gt; <\/span><b>Menus<\/b><span style=\"font-weight: 400;\">, where you created your navigation menus.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">To add a page already existing on your site, check the box next to the page title under the Pages section and click <\/span><b>Add to Menu<\/b><span style=\"font-weight: 400;\">.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">You can add individual blog posts by selecting the desired post from the Posts tab similarly.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">If you want to link to external websites or custom URLs, click <\/span><b>Custom Links<\/b><span style=\"font-weight: 400;\">. Enter the URL and link text, then click <\/span><b>Add to Menu<\/b><span style=\"font-weight: 400;\">.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">To add an entire category or tag select the corresponding option and add it to the menu.<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Once you&#8217;ve added your items, you can drag and drop them to reorder or create a hierarchy (sub-menus) by dragging items to the right, indenting them under the parent menu item. After arranging the items to your satisfaction, save your menu by clicking the <\/span><b>Save Menu<\/b><span style=\"font-weight: 400;\"> button.<\/span><\/p>\n\r\n<style>\r\n  #ctablocks_inline_92{\r\n          background-color: #000000;\r\n        color: #ffffff;\r\n    border-radius: 6px;\r\n  }\r\n\r\n  #ctablocks_inline_92 p{\r\n    color: #ffffff;\r\n  }\r\n  #ctablocks_inline_92 .button{\r\n        background-color: rgb(51,57,241);\r\n      color: #ffffff;\r\n    border-color: #3339f1 !important;\r\n  }\r\n  #ctablocks_inline_92 .button:hover{\r\n    background: rgba(51,57,241,0.8);\r\n    color: #ffffff;\r\n    opacity: 1;\r\n  }\r\n        #ctablocks_inline_92 .ctablocks_content_info p {\r\n        padding-left: 36px;\r\n      }\r\n      #ctablocks_inline_92 .ctablocks_content_button {\r\n          margin-left: 37px;\r\n      }\r\n  @media screen and (min-width: 768px) and (max-width: 1260px) {\r\n      #ctablocks_inline_92 .ctablocks_content_button {\r\n          margin-left: 37px !important;\r\n      }\r\n  }\r\n  ;\r\n<\/style>\r\n<div id=\"ctablocks_inline_92\" class=\"ctablocks_container inline_type\r\n        \">\r\n\r\n  <div class=\"ctablocks_content clear\">\r\n    <div class=\"ctablocks_content_info\">\r\n      \r\n            <div class=\"title-wrap\">\r\n\t\t\t\t\t                  <img decoding=\"async\" src=\"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/info-icon-cta.png\" alt=\"Simplify WordPress with 10Web\" title=\"Simplify WordPress with 10Web\">\r\n\t\t\t\t\t            <h4>Simplify WordPress with 10Web<\/h4>\r\n        <\/div>\r\n              <p>Automate manual work with 10Web Managed WordPress Hosting and 10Web AI Website Builder. Optimize your WordPress website effortlessly. <\/p>\r\n          <\/div>\r\n    <div class=\"ctablocks_content_button\">\r\n              <a href=\"https:\/\/10web.io\/ai-website-builder\/\" class=\"button\" data-gtag=\"sign-up-blog\" data-buttontype=\"sign-up\" data-gtag=\"cta-92\" data-buttontype=\"cta-inline\"\r\n\t        >Learn How<\/a>\r\n            \r\n    <\/div>\r\n  <\/div>\r\n    <\/div>\r\n\n<h2><span style=\"font-weight: 400;\">Summary<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Adding a menu to your WordPress site is a simple process that can greatly enhance your website&#8217;s navigation and user experience. Once you\u2019ve learned the hows it becomes a simple flow of actions. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">This guide suggested actionable methods to learn how to add a menu in WordPress. By following these steps, you will have a functioning navigation menu that aligns with your site&#8217;s layout and design. Keep in mind that a well-structured menu can help visitors find content more efficiently and improve the overall functionality of your site. So, master the methods we discussed to provide the best experience possible. <\/span><br \/>\n\r\n<style>\r\n  #ctablocks_scrollbox-with-icon_91{\r\n            color: #ffffff;\r\n    border-radius: 6px;\r\n  }\r\n\r\n  #ctablocks_scrollbox-with-icon_91 p{\r\n    color: #ffffff;\r\n  }\r\n  #ctablocks_scrollbox-with-icon_91 .button{\r\n          background-color: rgb(51,57,241);\r\n        color: #ffffff;\r\n    border-color: #3339f1 !important;\r\n  }\r\n  #ctablocks_scrollbox-with-icon_91 .button:hover{\r\n    background: rgba(51,57,241,0.8);\r\n    color: #ffffff;\r\n    opacity: 1;\r\n  }\r\n  #ctablocks_scrollbox-with-icon_91.ctablocks_container {\r\n    left: 100%;\r\n  }\r\n  @media screen and (max-width: 1300px) {\r\n      #ctablocks_scrollbox-with-icon_91.ctablocks_container {\r\n          left: 0;\r\n          margin: 0 auto;\r\n      }\r\n  }\r\n  #ctablocks_scrollbox-with-icon_91 .ctablocks_content {\r\n      background-color: #000000;\r\n  }\r\n<\/style>\r\n<div id=\"ctablocks_scrollbox-with-icon_91\" class=\"ctablocks_container scrollbox-with-icon_type\r\n      \">\r\n\r\n  <div class=\"ctablocks_content clear\">\r\n    <div class=\"ctablocks_content_info\">\r\n              <h4>Simplify WordPress with 10Web<\/h4>\r\n        <h4 class=\"mobile-title\">Simplify WordPress with 10Web<\/h4>\r\n              <p>Skip and automate manual work with 10Web Managed WordPress Hosting and the 10Web AI Website Builder.<\/p>\r\n          <\/div>\r\n    <div class=\"ctablocks_content_button\">\r\n              <a href=\"https:\/\/10web.io\/ai-website-builder\/\" class=\"button\" data-gtag=\"sign-up-blog\" data-buttontype=\"sign-up\" data-gtag=\"cta-91\" data-buttontype=\"cta-scrollbox-with-icon\"\r\n\t        >Learn How<\/a>\r\n            \r\n    <\/div>\r\n  <\/div>\r\n    <span class=\"close_ctablocks\">\r\n      <img decoding=\"async\" class=\"close-icon\" src=\"https:\/\/10web.io\/blog\/wp-content\/plugins\/cta-blocks\/assets\/images\/close_w.svg\" class=\"close\">\r\n      <img decoding=\"async\" class=\"floating-icon\" src=\"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Info-icon_Blog.png\" alt=\"Simplify WordPress with 10Web\" title=\"Simplify WordPress with 10Web\">\r\n<!--      <img decoding=\"async\" class=\"arrow-icon white\" src=\"\/cta-blocks\/assets\/images\/arrow-icon.svg\" class=\"close\">\r\n-->      <img decoding=\"async\" class=\"arrow-icon purple\" src=\"https:\/\/10web.io\/blog\/wp-content\/plugins\/cta-blocks\/assets\/images\/arrow-icon-purple.svg\" class=\"close\">\r\n  <\/span>\r\n<\/div>\r\n<br \/>\n <\/p>\n","protected":false},"excerpt":{"rendered":"<p>In WordPress, menus are an important navigation tool that helps website visitors quickly find the information they are looking for. They are located in the header, footer, or sidebar sections of your website and contain links that point to specific sections. Menus guide your users through your content and can significantly enhance the usability and functionality of your site. WordPress&#8230;<\/p>\n","protected":false},"author":11,"featured_media":34949,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"two_page_speed":[],"footnotes":"","tenweb_blog_toc":"<ul><li><a href=\"#wordpress-menu-basics\">WordPress menu basics<\/a><li><a href=\"#how-to-add-menus-in-wordpress\">How to add menus in WordPress<\/a><ul><li><a href=\"#creating-a-primary-menu-in-wordpress\">Creating a primary menu in WordPress<\/a><li><a href=\"#creating-a-secondary-menu-in-wordpress\">Creating a secondary menu in WordPress<\/a><li><a href=\"#creating-a-dropdown-menu-in-wordpress\">Creating a dropdown menu in WordPress<\/a><li><a href=\"#creating-menu-categories-in-wordpress\">Creating menu categories in WordPress<\/a><\/li><\/ul><li><a href=\"#how-to-customize-menu-appearance\">How to customize menu appearance<\/a><li><a href=\"#how-to-add-links-to-your-wordpress-navigation-menu\">How to add links to your WordPress navigation menu<\/a><li><a href=\"#summary\">Summary<\/a><\/li><\/ul>","tenweb_blog_competitor_type":"","tenweb_blog_competitor_names":"","tenweb_blog_twb_version":0,"tenweb_blog_type":""},"categories":[463],"tags":[],"class_list":["post-35726","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-guides"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.0 (Yoast SEO v23.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Add a Menu in WordPress: An A-Z Guide<\/title>\n<meta name=\"description\" content=\"Do you want to add a menu in WordPress? In this guide, you will learn how to add a menu in WordPress websites.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/10web.io\/blog\/how-to-add-menu-in-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add a Menu in WordPress: An A-Z Guide\" \/>\n<meta property=\"og:description\" content=\"Do you want to add a menu in WordPress? In this guide, you will learn how to add a menu in WordPress websites.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/10web.io\/blog\/how-to-add-menu-in-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"10Web - Build &amp; Host Your WordPress Website\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/10Web.io\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-14T10:27:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-24T12:02:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/add_menu_in_wordpress.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1569\" \/>\n\t<meta property=\"og:image:height\" content=\"880\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Tigran Nazaryan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@10Web_io\" \/>\n<meta name=\"twitter:site\" content=\"@10Web_io\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Tigran Nazaryan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Add a Menu in WordPress: An A-Z Guide","description":"Do you want to add a menu in WordPress? In this guide, you will learn how to add a menu in WordPress websites.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/10web.io\/blog\/how-to-add-menu-in-wordpress\/","og_locale":"en_US","og_type":"article","og_title":"How to Add a Menu in WordPress: An A-Z Guide","og_description":"Do you want to add a menu in WordPress? In this guide, you will learn how to add a menu in WordPress websites.","og_url":"https:\/\/10web.io\/blog\/how-to-add-menu-in-wordpress\/","og_site_name":"10Web - Build &amp; Host Your WordPress Website","article_publisher":"https:\/\/www.facebook.com\/10Web.io\/","article_published_time":"2024-04-14T10:27:24+00:00","article_modified_time":"2024-04-24T12:02:16+00:00","og_image":[{"width":1569,"height":880,"url":"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/add_menu_in_wordpress.jpg","type":"image\/jpeg"}],"author":"Tigran Nazaryan","twitter_card":"summary_large_image","twitter_creator":"@10Web_io","twitter_site":"@10Web_io","twitter_misc":{"Written by":"Tigran Nazaryan","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/10web.io\/blog\/how-to-add-menu-in-wordpress\/#article","isPartOf":{"@id":"https:\/\/10web.io\/blog\/how-to-add-menu-in-wordpress\/"},"author":{"name":"Tigran Nazaryan","@id":"https:\/\/10web.io\/blog\/#\/schema\/person\/9466e64f67fc213397b384bbe3af3bd0"},"headline":"How to Add a Menu in WordPress: An A-Z Guide","datePublished":"2024-04-14T10:27:24+00:00","dateModified":"2024-04-24T12:02:16+00:00","mainEntityOfPage":{"@id":"https:\/\/10web.io\/blog\/how-to-add-menu-in-wordpress\/"},"wordCount":1220,"commentCount":0,"publisher":{"@id":"https:\/\/10web.io\/blog\/#organization"},"image":{"@id":"https:\/\/10web.io\/blog\/how-to-add-menu-in-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/add_menu_in_wordpress.jpg","articleSection":["Guides"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/10web.io\/blog\/how-to-add-menu-in-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/10web.io\/blog\/how-to-add-menu-in-wordpress\/","url":"https:\/\/10web.io\/blog\/how-to-add-menu-in-wordpress\/","name":"How to Add a Menu in WordPress: An A-Z Guide","isPartOf":{"@id":"https:\/\/10web.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/10web.io\/blog\/how-to-add-menu-in-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/10web.io\/blog\/how-to-add-menu-in-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/add_menu_in_wordpress.jpg","datePublished":"2024-04-14T10:27:24+00:00","dateModified":"2024-04-24T12:02:16+00:00","description":"Do you want to add a menu in WordPress? In this guide, you will learn how to add a menu in WordPress websites.","breadcrumb":{"@id":"https:\/\/10web.io\/blog\/how-to-add-menu-in-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/10web.io\/blog\/how-to-add-menu-in-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/10web.io\/blog\/how-to-add-menu-in-wordpress\/#primaryimage","url":"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/add_menu_in_wordpress.jpg","contentUrl":"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/add_menu_in_wordpress.jpg","width":1569,"height":880,"caption":"How to add a menu in WordPress"},{"@type":"BreadcrumbList","@id":"https:\/\/10web.io\/blog\/how-to-add-menu-in-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/10web.io\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Add a Menu in WordPress: An A-Z Guide"}]},{"@type":"WebSite","@id":"https:\/\/10web.io\/blog\/#website","url":"https:\/\/10web.io\/blog\/","name":"10Web Blog - Build & Host Your WordPress Website","description":"10Web is an All-in-One Website Building Platform, offering Managed WordPress Hosting on Google Cloud, Beautiful Templates, Premium Plugins and Services.","publisher":{"@id":"https:\/\/10web.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/10web.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/10web.io\/blog\/#organization","name":"10Web","url":"https:\/\/10web.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/10web.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2025\/04\/Logo-768x686-1.png","contentUrl":"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2025\/04\/Logo-768x686-1.png","width":768,"height":686,"caption":"10Web"},"image":{"@id":"https:\/\/10web.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/10Web.io\/","https:\/\/x.com\/10Web_io","https:\/\/www.instagram.com\/10web.io\/","https:\/\/www.linkedin.com\/company\/10web\/mycompany\/","https:\/\/www.youtube.com\/c\/10Web"]},{"@type":"Person","@id":"https:\/\/10web.io\/blog\/#\/schema\/person\/9466e64f67fc213397b384bbe3af3bd0","name":"Tigran Nazaryan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/10web.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ce2393558e7591a237212f11acac58fb?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ce2393558e7591a237212f11acac58fb?s=96&d=mm&r=g","caption":"Tigran Nazaryan"},"description":"Tigran Nazaryan is an experienced science and technology professional. After seeing great potential in the automation of web development, he co-founded and became CInO of 10Web. Tigran is passionate about creating solutions to bring AI automation into web development and turning great ideas into powerful technological achievements.","sameAs":["https:\/\/www.linkedin.com\/in\/tnazaryan\/"],"url":"https:\/\/10web.io\/blog\/author\/tigran\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/10web.io\/blog\/wp-json\/wp\/v2\/posts\/35726","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/10web.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/10web.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/10web.io\/blog\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/10web.io\/blog\/wp-json\/wp\/v2\/comments?post=35726"}],"version-history":[{"count":0,"href":"https:\/\/10web.io\/blog\/wp-json\/wp\/v2\/posts\/35726\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/10web.io\/blog\/wp-json\/wp\/v2\/media\/34949"}],"wp:attachment":[{"href":"https:\/\/10web.io\/blog\/wp-json\/wp\/v2\/media?parent=35726"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/10web.io\/blog\/wp-json\/wp\/v2\/categories?post=35726"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/10web.io\/blog\/wp-json\/wp\/v2\/tags?post=35726"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}