{"id":89683,"date":"2021-10-08T19:38:36","date_gmt":"2021-10-08T23:38:36","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/?p=89683"},"modified":"2023-11-16T12:18:03","modified_gmt":"2023-11-16T17:18:03","slug":"joomla-menu-interface","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/joomla-menu-interface\/","title":{"rendered":"Learning About the Menu Interface in Joomla 4.0"},"content":{"rendered":"<figure class=\"wp-block-image size-large is-style-default\"><a href=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/11\/The-Menu-Interface-in-Joomla-4.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/11\/The-Menu-Interface-in-Joomla-4-1024x538.png\" alt=\"Learning About the Menu Interface in Joomla 4.0 Hero Image\" class=\"wp-image-107703\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/11\/The-Menu-Interface-in-Joomla-4-1024x538.png 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/11\/The-Menu-Interface-in-Joomla-4-300x158.png 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/11\/The-Menu-Interface-in-Joomla-4-768x403.png 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/11\/The-Menu-Interface-in-Joomla-4.png 1200w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/a><\/figure>\n\n\n\n<p>When you think about menus on a website you begin to understand their importance for your viewers.  Menus provide the necessary navigation interface for the content of your site. Without menus, your visitors would be unable to get to your content unless they know the specific link to find what they\u2019re looking for.<\/p>\n\n\n\n<p>Joomla 4.0 menus are affected by the theme being used by the Joomla site. This means that the location and appearance of the menus will be determined by the theme that you have selected.  However, the content and make-up of the menus can be easily managed through the menu interface in the Joomla 4.0 administrator dashboard.<\/p>\n\n\n\n<p>This article will take you through the general menu interface in order to familiarize you with menu features provided through Joomla 4.0.  You will learn how to find the menu options in the administrator dashboard, the difference between <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"#menu-interface\">The Joomla Menu Interface<\/a><\/li>\n\n\n\n<li><a href=\"#site-menu\">Understanding the Difference between Site and Menu<\/a><\/li>\n\n\n\n<li><span style=\"color: initial;\"><a href=\"#actions-filtering\">Menu Actions and Filtering Toolbars<\/a><\/span><\/li>\n<\/ul>\n\n\n\n<p class=\"alert alert-info\">Need a secure and reliable home for your new Joomla 4.0 site?  Check out InMotion\u2019s <a href=\"\/vps-hosting\">Managed Linux VPS<\/a> hosting solutions!  You\u2019ll find servers tailored for your budget needs.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"menu-interface\">The Joomla Menu Interface<\/h2>\n\n\n\n<p>The menu in a Joomla site can be accessed in two different ways: the front end and the backend.  The front end is generally where website visitors can interact with the menu items that you have added to the site.  The appearance and position of a menu are determined by the Joomla theme that you have selected for the site. The default theme that comes with Joomla 4.0 is <a href=\"https:\/\/magazine.joomla.org\/all-issues\/january-2021\/joomla-4-cassiopeia-template\" target=\"_blank\" rel=\"noreferrer noopener\">Cassiopeia<\/a>.  You can see the menu at the top of the home page when you access the site in a web browser.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><a href=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/joomla4-front-end-menu.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"486\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/joomla4-front-end-menu-1024x486.jpg\" alt=\"menu shown in the home page of the Cassiopeia theme in Joomla 4.0\" class=\"wp-image-89694\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/joomla4-front-end-menu-1024x486.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/joomla4-front-end-menu-300x143.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/joomla4-front-end-menu-768x365.jpg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/joomla4-front-end-menu-1536x730.jpg 1536w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/joomla4-front-end-menu.jpg 1920w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/a><figcaption class=\"wp-element-caption\">Default home page for Cassiopeia theme in Joomla 4.0<\/figcaption><\/figure>\n\n\n\n<p>The backend is where you would manage the menu created in your Joomla site.  You can access the menu through the Joomla Administrator Dashboard. Here are the steps to access the menu in the dashboard:<\/p>\n\n\n\n<ol class=\"article_list wp-block-list\">\n<li><a href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/how-to-log-in-to-administrative-dashboard\/\">Log in to the Joomla Administrator<\/a><\/li>\n\n\n\n<li>In the main menu at left click on <strong>Menus<\/strong>.<br><br><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"475\" class=\"wp-image-89695\" style=\"width: 1000px;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/joomla4-menus-main.jpg\" alt=\"Joomla Menus section\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/joomla4-menus-main.jpg 1920w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/joomla4-menus-main-300x143.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/joomla4-menus-main-1024x486.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/joomla4-menus-main-768x365.jpg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/joomla4-menus-main-1536x730.jpg 1536w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><br><\/li>\n\n\n\n<li>Here you can see the main options for working with menus in Joomla.  Click on the square icon next to the <strong>Menus <\/strong>item in order to get to the <strong>Menu Dashboard<\/strong> page. You can see the icon highlighted in the screenshot below:<br><br><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"475\" class=\"wp-image-89696\" style=\"width: 1000px;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/joomla4-menu-dashboard.jpg\" alt=\"Menu Dashboard page\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/joomla4-menu-dashboard.jpg 1920w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/joomla4-menu-dashboard-300x143.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/joomla4-menu-dashboard-1024x486.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/joomla4-menu-dashboard-768x365.jpg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/joomla4-menu-dashboard-1536x730.jpg 1536w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><br><br>The <strong>Menu Dashboard<\/strong> will give you the menu items using a view organized by <strong>Menus<\/strong> and <strong>Site<\/strong>.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"site-menu\">Understanding the Difference between Site and Menus<\/h2>\n\n\n\n<p>Like any website, Joomla websites are composed of pages.  Individual Joomla pages are referred to as <em>sites<\/em>. Content created within each site is known as an <em>article<\/em>.  The menu section allows you to add <em>sites<\/em> to your website.  Each site can have its own menu.  <\/p>\n\n\n\n<p>In the example above you can see 4 sites: Main Menu (home), Main Menu Blog, Special Menu, and Bottom Menu.  If you think of each of these sites as pages in a website, then it becomes easier to understand.<br><br>A site (or page) can have featured content and a separate or similar menu.  For example, you might create a site called <strong>About Us<\/strong> and include several articles that describe your company and\/or employees.  That site may also have the same menu as what\u2019s on your home page, or no options at all depending on what you want to show.  There would normally be a home button to return to the home page.<\/p>\n\n\n\n<p>In our screenshots, the <strong>Main Menu<\/strong> (home) with the home icon next to it is the home page for the Joomla site.  This menu item is normally used as the return option that brings you back to the home page.  So, if a user goes to a different page on your website then wants to go back to the home page, you would provide that menu item so that they can click on it to return. <\/p>\n\n\n\n<p>In this theme, there is also something called <strong>Main Menu Blog<\/strong>.  This can be confusing, but you can see this menu described when <strong>Manage<\/strong> is selected in the <strong>Menu dashboard<\/strong>.  You will see the following:<br><br><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><a href=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/joomla4-menu-manage.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"486\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/joomla4-menu-manage-1024x486.jpg\" alt=\"Joomla site Menu items in Manage view\" class=\"wp-image-89698\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/joomla4-menu-manage-1024x486.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/joomla4-menu-manage-300x143.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/joomla4-menu-manage-768x365.jpg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/joomla4-menu-manage-1536x730.jpg 1536w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/joomla4-menu-manage.jpg 1920w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/a><\/figure>\n\n\n\n<p>Here you can see a description under the<strong> Main Menu blog <\/strong>that says \u201cThe horizontal dropdown menu\u201d.  This menu is what you see on the front end of the website:<br><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"135\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/main-blog-menu-1-1024x135.jpg\" alt=\"\" class=\"wp-image-89699\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/main-blog-menu-1-1024x135.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/main-blog-menu-1-300x40.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/main-blog-menu-1-768x101.jpg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/main-blog-menu-1-1536x202.jpg 1536w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/main-blog-menu-1.jpg 1890w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<p>In order to manage these menu items,  we clicked on <strong>Main Menu Blog<\/strong> in the menu list. This will display a table listing of all the menu and submenu items in the horizontal drop-down menu.  The list will also include the submenus that are not shown in the screenshot. Note that if you click on the menu item on the right side, then it will only display the properties of the individual menu item.  This is where you can give the item a unique name and description.  <br><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"524\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/menu-item-properties-1024x524.jpg\" alt=\"\" class=\"wp-image-89702\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/menu-item-properties-1024x524.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/menu-item-properties-300x153.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/menu-item-properties-768x393.jpg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/menu-item-properties-1536x786.jpg 1536w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/menu-item-properties.jpg 1879w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<p>Clicking on the menu item in the menu column will bring up the menu list as shown in the horizontal menu.  When you compare the menu items in the list you can see that they match the horizontal menu as previously shown.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"486\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/main-menu-blog-listing-1024x486.jpg\" alt=\"Main Menu blog - list of menu items\" class=\"wp-image-89703\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/main-menu-blog-listing-1024x486.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/main-menu-blog-listing-300x143.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/main-menu-blog-listing-768x365.jpg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/main-menu-blog-listing-1536x730.jpg 1536w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/main-menu-blog-listing.jpg 1920w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<p>Let\u2019s take a closer look at each column in the table:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Status<\/strong> \u2013 lets you know if the menu item is published or not<\/li>\n\n\n\n<li><strong>Title<\/strong> \u2013 the title of that menu item.  Clicking on this item will give you properties for that menu item<\/li>\n\n\n\n<li><strong>Menu<\/strong> \u2013 this is location of the menu item in the menu structure<\/li>\n\n\n\n<li><strong>Home<\/strong> \u2013 identifies the home page<\/li>\n\n\n\n<li><strong>Access<\/strong> \u2013 identifies the access to that menu item<\/li>\n\n\n\n<li><strong>ID <\/strong>\u2013 internallly generated number ID<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"actions-filtering\">Menu Actions and Filtering Toolbars<\/h2>\n\n\n\n<p>When you look at the menu items, you will see options at the top that include New, Actions, and Rebuild. We describe each of the options in the list below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"625\" height=\"175\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/menu-items-actions.jpg\" alt=\"Menu actions toolbar\" class=\"wp-image-89706\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/menu-items-actions.jpg 625w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/menu-items-actions-300x84.jpg 300w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>New<\/strong> \u2013 allow the creation of a new menu item<\/li>\n\n\n\n<li><strong>Rebuild <\/strong>\u2013 rebuild the menu table in the even that the table becomes corrupt; normally not required<\/li>\n<\/ul>\n\n\n\n<p><strong>Actions drop-down menu<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Publish <\/strong>\u2013 menu item will be available to website visitors<\/li>\n\n\n\n<li><strong>Unpublish<\/strong> \u2013 removes the menu item from public website visitors<\/li>\n\n\n\n<li><strong>Check-in<\/strong> \u2013 checks the select menu item(s) in to help manage menu items being edited<\/li>\n\n\n\n<li><strong>Home<\/strong> \u2013 sets the home page (this can only be one site page)<\/li>\n\n\n\n<li><strong>Trash<\/strong> \u2013 marks menu items as trashed (not permanently deleted)<\/li>\n\n\n\n<li><strong>Batch<\/strong> \u2013\u00a0 batch processes a change that would apply to multiple selected menu items <\/li>\n<\/ul>\n\n\n\n<p>Directly beneath the top three buttons of New, Actions, Rebuild are the filtering options.  The filtering options allow you to separate and display only the items that you have opted to show.  There are multiple filtering options that you can choose from as per this screenshot:<br><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"231\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/menu-filters-1024x231.jpg\" alt=\"Menu interface -filtering options\" class=\"wp-image-89711\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/menu-filters-1024x231.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/menu-filters-300x68.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/menu-filters-768x173.jpg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/menu-filters.jpg 1527w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Site <\/strong>\u2013 this drop-down menu allows you select either Site or Administrator.  This identifies where the menu would be used<\/li>\n\n\n\n<li><strong>Select Menu<\/strong> (Main menu Blog selected in the screenshot above) \u2013 you can choose the existing menu to filter<\/li>\n\n\n\n<li><strong>Search<\/strong> \u2013 type in term you wish to use to isolate menu items<\/li>\n\n\n\n<li><strong>Filter options<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Select Status<\/strong> \u2013 select items that published, unpublished, trashed or all (show all items regardless of status)<\/li>\n\n\n\n<li><strong>Select Access<\/strong> \u2013 shows items based on user access type (public, guest, registered, special, super users)<\/li>\n\n\n\n<li><strong>Select Max Levels<\/strong> \u2013 shows items based on hierarchy (1 \u2013 no parent items, 2-10 levels \u2013 only shows items that fall into that hierarchy order<\/li>\n\n\n\n<li><strong>Select Parent Menu<\/strong> \u2013 show only items items in a parent menu item<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Order  \u2013 show results in ascending or descending order<\/li>\n\n\n\n<li># (currently showing 20 in screenshot) \u2013 number of results to show at one time<\/li>\n<\/ul>\n\n\n\n<p>This concludes our overview of the menu interface in both the front and backend of your Joomla 4.0 website.  To learn more using the menu, please our article on Adding and Removing Menu Items in Joomla 4.0.<\/p>\n\n\n<div class=\"jumbotron\"><p style=\"margin-top:0;\"><img decoding=\"async\" src=\"https:\/\/design.inmotionhosting.com\/assets\/icons\/custom\/security.svg\" align=\"right\" alt=\"Secure VPS Hosting\" height=\"80\">Enjoy high-performance, lightning-fast servers with increased security and maximum up-time with our <a href=\"https:\/\/www.inmotionhosting.com\/vps-hosting\">Secure VPS Hosting<\/a>!<\/p>\r\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/design.inmotionhosting.com\/assets\/icons\/standard\/check-blue.svg\" alt=\"check mark\" width=\"24\" height=\"24\" \/>Linux VPS    <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/design.inmotionhosting.com\/assets\/icons\/standard\/check-blue.svg\" alt=\"check mark\" width=\"24\" height=\"24\" \/>cPanel or Control Web Panel    <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/design.inmotionhosting.com\/assets\/icons\/standard\/check-blue.svg\" alt=\"check mark\" width=\"24\" height=\"24\" \/>Scalable    <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/design.inmotionhosting.com\/assets\/icons\/standard\/check-blue.svg\" alt=\"check mark\" width=\"24\" height=\"24\" \/>Website Migration Assistance<\/p>\r\n<p style=\"margin:10px 0;\"><a class=\"btn btn-primary btn-lg\" href=\"https:\/\/www.inmotionhosting.com\/vps-hosting\/linux-vps\">Linux VPS Hosting<\/a><\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>When you think about menus on a website you begin to understand their importance for your viewers. Menus provide the necessary navigation interface for the content of your site. Without menus, your visitors would be unable to get to your content unless they know the specific link to find what they&#8217;re looking for. Joomla 4.0<a class=\"moretag\" href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/joomla-menu-interface\/\"> Read More ><\/a><\/p>\n","protected":false},"author":57014,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4496],"tags":[],"class_list":["post-89683","post","type-post","status-publish","format-standard","hentry","category-joomla-4"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Learning About the Menu Interface in Joomla 4.0 | InMotion Hosting<\/title>\n<meta name=\"description\" content=\"Learn about the Joomla 4.0 menu interface and how to determine between sites and menus so that you understand the menus displayed in the admin dashboard.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/joomla-menu-interface\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Learning About the Menu Interface in Joomla 4.0 | InMotion Hosting\" \/>\n<meta property=\"og:description\" content=\"Learn about the Joomla 4.0 menu interface and how to determine between sites and menus so that you understand the menus displayed in the admin dashboard.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/joomla-menu-interface\/\" \/>\n<meta property=\"og:site_name\" content=\"InMotion Hosting Support Center\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inmotionhosting\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-10-08T23:38:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-16T17:18:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/learning-joomla4-menu-interface-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"InMotion Hosting Contributor\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/InMotionHosting\" \/>\n<meta name=\"twitter:site\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InMotion Hosting Contributor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/joomla-menu-interface\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/joomla-menu-interface\/\"},\"author\":{\"name\":\"InMotion Hosting Contributor\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/f9a4fc454cd1df128ee8e898d30d4644\"},\"headline\":\"Learning About the Menu Interface in Joomla 4.0\",\"datePublished\":\"2021-10-08T23:38:36+00:00\",\"dateModified\":\"2023-11-16T17:18:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/joomla-menu-interface\/\"},\"wordCount\":1292,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/joomla-menu-interface\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/11\/The-Menu-Interface-in-Joomla-4-1024x538.png\",\"articleSection\":[\"Joomla 4\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/joomla-menu-interface\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/joomla-menu-interface\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/joomla-menu-interface\/\",\"name\":\"Learning About the Menu Interface in Joomla 4.0 | InMotion Hosting\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/joomla-menu-interface\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/joomla-menu-interface\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/11\/The-Menu-Interface-in-Joomla-4-1024x538.png\",\"datePublished\":\"2021-10-08T23:38:36+00:00\",\"dateModified\":\"2023-11-16T17:18:03+00:00\",\"description\":\"Learn about the Joomla 4.0 menu interface and how to determine between sites and menus so that you understand the menus displayed in the admin dashboard.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/joomla-menu-interface\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/joomla-menu-interface\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/joomla-menu-interface\/#primaryimage\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/11\/The-Menu-Interface-in-Joomla-4.png\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/11\/The-Menu-Interface-in-Joomla-4.png\",\"width\":1200,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/joomla-menu-interface\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Learning About the Menu Interface in Joomla 4.0\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"name\":\"InMotion Hosting Support Center\",\"description\":\"Web Hosting Support &amp; Tutorials\",\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\",\"name\":\"InMotion Hosting\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"width\":696,\"height\":696,\"caption\":\"InMotion Hosting\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/inmotionhosting\/\",\"https:\/\/x.com\/InMotionHosting\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/f9a4fc454cd1df128ee8e898d30d4644\",\"name\":\"InMotion Hosting Contributor\",\"description\":\"InMotion Hosting contributors are highly knowledgeable individuals who create relevant content on new trends and troubleshooting techniques to help you achieve your online goals!\",\"sameAs\":[\"https:\/\/www.linkedin.com\/company\/inmotion-hosting\/\",\"https:\/\/x.com\/https:\/\/twitter.com\/InMotionHosting\"],\"url\":\"https:\/\/www.inmotionhosting.com\/support\/author\/inmotion-hosting-contributor\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Learning About the Menu Interface in Joomla 4.0 | InMotion Hosting","description":"Learn about the Joomla 4.0 menu interface and how to determine between sites and menus so that you understand the menus displayed in the admin dashboard.","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:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/joomla-menu-interface\/","og_locale":"en_US","og_type":"article","og_title":"Learning About the Menu Interface in Joomla 4.0 | InMotion Hosting","og_description":"Learn about the Joomla 4.0 menu interface and how to determine between sites and menus so that you understand the menus displayed in the admin dashboard.","og_url":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/joomla-menu-interface\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2021-10-08T23:38:36+00:00","article_modified_time":"2023-11-16T17:18:03+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/learning-joomla4-menu-interface-1.jpg","type":"image\/jpeg"}],"author":"InMotion Hosting Contributor","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/InMotionHosting","twitter_site":"@InMotionHosting","twitter_misc":{"Written by":"InMotion Hosting Contributor","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/joomla-menu-interface\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/joomla-menu-interface\/"},"author":{"name":"InMotion Hosting Contributor","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/f9a4fc454cd1df128ee8e898d30d4644"},"headline":"Learning About the Menu Interface in Joomla 4.0","datePublished":"2021-10-08T23:38:36+00:00","dateModified":"2023-11-16T17:18:03+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/joomla-menu-interface\/"},"wordCount":1292,"commentCount":2,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/joomla-menu-interface\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/11\/The-Menu-Interface-in-Joomla-4-1024x538.png","articleSection":["Joomla 4"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/joomla-menu-interface\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/joomla-menu-interface\/","url":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/joomla-menu-interface\/","name":"Learning About the Menu Interface in Joomla 4.0 | InMotion Hosting","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/joomla-menu-interface\/#primaryimage"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/joomla-menu-interface\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/11\/The-Menu-Interface-in-Joomla-4-1024x538.png","datePublished":"2021-10-08T23:38:36+00:00","dateModified":"2023-11-16T17:18:03+00:00","description":"Learn about the Joomla 4.0 menu interface and how to determine between sites and menus so that you understand the menus displayed in the admin dashboard.","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/joomla-menu-interface\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/joomla-menu-interface\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/joomla-menu-interface\/#primaryimage","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/11\/The-Menu-Interface-in-Joomla-4.png","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/11\/The-Menu-Interface-in-Joomla-4.png","width":1200,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/joomla-menu-interface\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"Learning About the Menu Interface in Joomla 4.0"}]},{"@type":"WebSite","@id":"https:\/\/www.inmotionhosting.com\/support\/#website","url":"https:\/\/www.inmotionhosting.com\/support\/","name":"InMotion Hosting Support Center","description":"Web Hosting Support &amp; Tutorials","publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.inmotionhosting.com\/support\/#organization","name":"InMotion Hosting","url":"https:\/\/www.inmotionhosting.com\/support\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","width":696,"height":696,"caption":"InMotion Hosting"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inmotionhosting\/","https:\/\/x.com\/InMotionHosting"]},{"@type":"Person","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/f9a4fc454cd1df128ee8e898d30d4644","name":"InMotion Hosting Contributor","description":"InMotion Hosting contributors are highly knowledgeable individuals who create relevant content on new trends and troubleshooting techniques to help you achieve your online goals!","sameAs":["https:\/\/www.linkedin.com\/company\/inmotion-hosting\/","https:\/\/x.com\/https:\/\/twitter.com\/InMotionHosting"],"url":"https:\/\/www.inmotionhosting.com\/support\/author\/inmotion-hosting-contributor\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"primary_category":{"id":4496,"name":"Joomla 4","slug":"joomla-4","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/"},"_links":{"self":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/89683","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/users\/57014"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/comments?post=89683"}],"version-history":[{"count":6,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/89683\/revisions"}],"predecessor-version":[{"id":107915,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/89683\/revisions\/107915"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=89683"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=89683"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=89683"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}