Introduction

If you have followed the previous guide on how to create and manage Articles in Joomla! 4, you have learned how to easily create articles and organize them into categories to be more user-friendly and thus drive more website traffic. You’ve done that task and understood how articles and categories work in the Joomla! CMS backend. In this tutorial, we’re gonna use the same site to guide you on how to create a menu item that points to an article category to provide even more convenient site navigation in Joomla! 4.

At the end of this tutorial, you’ll be able to do the following:

  • Understand how Joomla! menus work
  • Create a new menu and a menu item
  • Categorize your menu item
  • Link your menu item to an article or a category
  • Publish and show your menu on the front-end

No more wandering around, let’s get straight to the point!

Step by step to create a menu item that links to an article category in Joomla! 4 CMS

What is Joomla! Menu?

Menu is one of the most important elements of a website that makes up the structure of the page. In Joomla!, a Menu is a set of menu items used for website navigation. Each menu item defines an URL to a page on your site and holds settings that control the contents (articles, categories, tagged items, etc) and style (modules, layout) of that page. Thanks to Joomla! Menu, navigating to any part of the website is easy and convenient. And since each menu item has its own alias, you can take advantage of menu items to simplify the links on your website.

Create a New Menu

Creating menus in Joomla! is rather simple. Joomla! has a built-in system for menus creation. You need to distinguish between menus and menu items. As mentioned, a menu includes a set of menu items. So, to create a new menu, you first need to access the Menu Manager.

From the admin panel (or Home Dashboard), in the backend of your Joomla! site, navigate to Menus and then Manage from the side panel on the left to access the Menu Manager.

Access Menus In Joomla! 4Access Menus from the Home Dashboard in Joomla! 4.0.2 Stable

Once you have access to the Menu Manager, you can manipulate all the menus on your website however you like. But first, you’ll need to learn how to create and publish a new menu.

To add a new menu, click on the New button at the top-left corner of the screen.

Create A New Menu In Joomla! 4Add a new menu

Whenever you create anything, an article, a category, a module, or a menu item in Joomla!, pay attention to the asterisks. These asterisks indicate required information that you should prioritize over any others.

Menus: AddEnter the required information

Edit the following options:

  • Title – Enter a title for your new menu. (Required)
  • Unique Name – The system name of the new menu. (Required)
  • Description – Enter a short description for your new menu. (Optional)

On the Permissions tab, you can manage the permission settings for the user groups. Unless you’re really sure what you’re doing, I recommend leaving the default values.

When you are ready with the data for your new menu, simply click on the Save & Close button to create it. Alternatively, click the down arrow icon next to the button to open up more Save options, like Save & New – save the changes and create another new menu.

Save The MenuSimply click on the Save & Close button to create your new menu

After this step, a green message will indicate that the menu has been successfully created.

Menu SavedThe new menu has been successfully added

Back to the Menu Manager, you’ll see the list of created menus. You can modify or delete any menu.

Create a Menu Item that Points to an Article Category

Menu Items are the core structure of a Joomla! website. Each menu item is a link to a page and loads a predefined type of page which is determined by the Menu Item Type. The Menu Item Type determines the type of page that will display when this menu choice is selected by the User. The core distribution of Joomla! provides 36 different menu item types. If you install third-party extensions, these may add more new menu item types to the list.

To create a new menu item, you must decide to which menu the new menu item belongs. In this tutorial, we will create a new menu item in the Sample Menu menu that we just created in the step above.

From the Home Dashboard, click Menus from the side panel on the left, and then under Site, click on the + icon next to the name of the menu you want to work with to start adding a new menu item to this menu.

Add New Menu ItemAdd a new menu item directly to the created menu right from the Dashboard

Alternatively, you can also add a new menu item by navigating to Menus > Manage > Add New, then manually select a menu afterwards.

Now you should see a form like this. Pay attention to the required fields (mandatory).

Menus: New ItemEnter the required information

Edit the following options:

  • Title – Enter a title for your new menu item. This will be the text displayed for the newly added menu item. (Required)
  • Alias – This is used to refer to the title and is important for the Search Engine Friendly URLs features. You can leave it blank, Joomla! will automatically generate it for you based on your new menu item title. The content of this field will determine the page URL when SEF is activated.
  • Menu Item Type – Click the Select button to choose an appropriate Menu Item Type. Each one will give you different settings. This can be one of the core menu item types or a menu item type provided by an installed extension.
  • Menu – This should already be set to Sample Menu in this case (or the menu you have previously chosen). Here you have the possibility to move the item to another menu if you wish. This field is quite useful when you decide to change the item location later. (Required)
  • Parent Item – Here you can specify where to place the new menu item. If this is a parent level item, select – No parent –. If this is a sub-item, select a parent item.
  • Ordering – Click on the Save button at the top of the page and the Ordering drop-down will be visible. The new menu item will default to the bottom of the list, but you can change that by selecting – First –, – Last –, or another menu item in the list to change its position.
  • Status – The published status of the menu item. If you wish your new item to be shown on your site, set this to Published.
  • Default Page – Sets this menu item as the default or home page of the site. You must have a default page set at all times.
  • Access – This option will specify who will be able to see this new menu item:
    • Public – Everyone can view.
    • Guest – Everyone can view.
    • Registered – Only registered users can view.
    • Special – Only users with author status or higher can view.
    • Super Users – Only super users can view.
  • Note – You can add an optional note to display in the Menu Manager.

In addition to the Details tab, the other tabs include several options or parameters for the article. Click on each tab to view the parameters and change the settings to suit your requirements. For example, if you’d like to display the page title set in the previous parameter, you can choose to Show Page Heading on the Page Display tab.

And with that said, this tutorial will show you how to create a menu item to display a list of articles in a category. So I will choose Category List as the Menu Item Type. You can do the same if you want to associate your menu item with an article instead of a category. In that case, simply select Articles > Single Article as the menu item type.

Menus: New Item - Fill In InformationCreate a menu item that points to an article category

When you’re ready with your settings for the new menu item, simply click the Save & Close button to create it.

After this step, a green message will indicate that the menu item has been successfully saved.

Create a Module for Your Menu

In Joomla!, a menu isn’t automatically shown on the site’s front-end. You need to create a Menu Module using the Module Manager and instruct the module which menu to show. Subsequently, you can select where the module should appear on the site, by choosing one of the available Module Positions of the active template.

Since we have a new menu created in the previous step, we can now add a module for it directly from the Menu Manager.

In the far-right column of the Menu Manager, click on the Add a module for this menu button. You can also add a Menu Module through the Module Manager, then manually select your newly created menu afterwards.

Add Module For MenuAdd a module for the new menu

Edit the following options:

  • Title – Enter the title of your new menu module. (Required)
    If you want this title displayed on the front of the website, switch the Title option to Show on the right.
  • Select Menu – Select a previously created menu. Here this should show the name of the menu you just created.
  • Base Item – Select a menu item to always be used as the base for the menu display. If Current is selected the active item is used as the base.
  • Start Level – Level to start rendering the menu at. Setting the start and end levels to the same # and setting Sub-menu Items to Show will only display that single level.
  • End Level – Level to stop rendering the menu at. If you choose All, all levels will be shown depending on the Sub-menu Items setting.
  • Sub-menu Items – Setting this to Show will expand the menu and make its sub-menu items always visible.
  • Position – You may select a module position for where you want your menu to appear from the list of predefined positions or enter your own module position by typing the name in the field and pressing enter. I would choose to have it appear in the sidebar-right position below the main menu in my case.
  • Status – The published status of the item. If you wish your new item to be shown on your site, set this to Published.
  • Menu Assignment – Select the pages where the module should appear. Selecting On all pages will show the module on all pages in the selected module position.

Add Module For Menu - Fill In InformationFill in the required information

Once you’re ready with your settings, click the Save & Close button to save your changes and make your menu visible on the front-end.

Back in Menu Manager, a green message will indicate that the module has been successfully saved. You can also now see which modules are associated with your menu in the Linked Modules column.

Module SavedNow your menu is accompanied by a menu module

After this step, you can now check your final results!

Review Your Menu on the Front-end

Now, go back to the front-end and refresh the page. You should be able to see your new menu item(s) at the module position you selected.

Please note that you might need to log in as a registered user or administrator to view your new item if it’s not visible. This all depends on the Access Level you have set.

In my case, the menu item will appear in the sidebar-right position below my Main Menu on the home page.

And this is how it looks!

Review On FrontendCheck your results on the site’s front-end

When you click on the menu item, a page showing a list of articles in a selected category will be opened.

Sample Menu Item Showing Articles In A CategoryThe created menu item opens a page displaying articles in a selected category

Since this category has only one article, so does this list. But if you change the menu item setting to display articles from another category, you’ll see more clearly how it works.

Sample Menu Item Showing Articles In Another CategoryThe menu item for when it’s set to point to another category

Remember that you can go back and edit your menu(s), menu item(s), and/or menu module(s) at any time. If you want to change the menu position, choose a different module position for where you want your menu to appear. You’ll just need to do it using Module Manager.

That’s pretty much it!

Watch Video Tutorial

Conclusion

So, through this tutorial, you learned how to create a menu, a menu item, and then point it to a category to show a list of its articles in Joomla! 4. If you have any questions, don’t hesitate to leave us your comments in the Comments section below this post. We will respond as soon as possible.

Now, enjoy and stay tuned for more how-tos! And if you’re looking for performance Joomla 4 templates, don’t miss our list.

5/5 - (3 votes)
Lt Digital Team (Content &Amp; Marketing)

Flash Sale Grab 25% Off for everything on today, don't miss it. Coupon code: FLASHSALE25 Redeem Now
Flash Sale Grab 25% Off for everything on today, don't miss it. Coupon code: FLASHSALE25 Redeem Now