Create a Joomla Menu In 3 Simple Steps

“You can’t judge a book by its cover” but you can judge a website by how well-built its menu is.

Your Joomla menu is of paramount importance. It’s how visitors to your site will navigate through your content, so it should be a breeze to use. But building a good menu can be tricky - that’s where Joomla’s menu building function comes in to play.

Joomla has a built-in menu building system. It looks a little complicated at first glance, but the payoff is worth it. Once you get familiar with it, you can easily build a variety of different types of menus for your website.

In this article, we’ll take you through a step-by-step guide on how to use Joomla menu-building features.

Table of Contents

How to create a Menu in Joomla

• Step 1: Creating a new menu
• Step 2: Creating a new menu item
• Step 3: Displaying the menu on your site

Joomla Menu Types - Which one to choose?

Creating a dropdown menu in Joomla

Reorder menu in Joomla

Updating the meta tags for your Joomla menu

Adding icons next to your Joomla menu

How to create a Menu in Joomla

Creating a menu in Joomla requires three basic steps:

• Step 1: Create a new menu
• Step 2: Add menu items
• Step 3: Display and position your menu

Before we get into it, you’ll need to understand the difference between the Menu and Menu items in Joomla admin. 

• A Joomla Menu consists of many Menu Items, used for website navigation.
• Each Menu Item defines a URL to a page on your site. It also defines the content and layout for that page.
• To display any menu or menu item, you need to use a Module Menu.

Step 1: Creating a new menu

By default, Joomla already has a Main Menu. If you don’t need to create another menu set, you can skip to step 2, and start adding new menu items directly to the main menu.

To create a new menu, go to Menu > Manage > Add New Menu

Step 2: Creating a new menu item

1. Go to Main Menu > Add New Menu item

The process is the same regardless of what style of menu you’re using.

2. For each new menu item, you’ll need to fill out the following fields in the Details tab - the other fields are optional. 

• Menu Title
• Menu Item Type
• Parent item
• Status (Change to Published)

Then press Save.

For example, we set up the below menu using “Single Article” as the menu item type.

Step 3: Displaying the menu on your site

This step is required when you create a new Joomla menu or need to display the same menu in different places on your website.

To create a Menu Module. Go to: Extensions > Modules > Create New.

Once you’ve done this, you’ll have to set up your Menu Module.

• Select menu: choose the menu you want to display.
• Position: choose where you want to display it.

Now you can change the status to published and hit Save.

By default, Joomla displays your menu horizontally at the top of your webpage - this is position 1 (ProtoStar template). We want to move this to display it in position 7, so that it appears vertically on the right side of the screen.

As you can see above, changing the position of your menu is easy. Simply select where you want it to be and let Joomla do the rest.

Joomla Menu Types - Which one to choose?

There are many different types of menu on Joomla. In this section, we’ll show you the most common ones and how to use them properly.

+ Article - Category Blog: This shows all articles in a hierarchical list. It’s most often used in Joomla news sites and blog pages.

+ Article - Featured: This type of menu layout showcases specific content on your homepage. It’s great for guiding attention straight to what matters most.

+ Article - Single Article: The most common menu type on Joomla, the single article menu shows a single article as your homepage. However, with the help of some Joomla page builder extensions, you can transform this normal article into a captivating landing page without any coding skills.

+ System Links - Menu Heading: Used to create a placeholder for other menu items. When hovering over it, it will show a drop-down menu containing all of its sub-items.

+ System Links - Menu Item Alias: This creates a link to another existing menu item. Use it when you want to avoid creating duplicate menus or content on your site. It’s generally used to create footer menus.

+ Users - Login form, Registration or Search: This adds some basic features to your website.

Creating a dropdown menu in Joomla

Having a drop-down menu is a great way to optimize your webpage to look less cluttered. You can easily create drop-down menus in Joomla.

Simply use the Parent Item option when setting up Menu Items.

It will show in the back-end like this:

And in frontend:

 

Reordering your menu in Joomla

There are 2 ways for you to change the order of your menu:

Method 1: Use the Ordering option when setting up menu items.

Method 2: Use the drag and drop ordering feature in Menu Items List.

Updating meta tags for your Joomla menu

You can update the meta title by going to Page Display > Browser Page Title.

You can also update your meta description in the Metadata tab:

Adding icons to your Joomla menu

You can add an image next to the menu by going to Link Type followed by Link Image. Simply upload the image that you want to appear.

However, you need to resize your image or it may not display as you wish. It will need to be modified in the CSS code to ensure that it’s straight.

To avoid confusion, you could use a third-party Joomla template provider like JoomlaShine to add icons to your menu easily. Integrate it with Font Awesome Icon, and all you need to do is add the icon class in the Link Class field.

Read more: How to create Mega menu in Joomla?

Final thought, 

A good structure and well-built menu bring great trust to your site. Fortunately, Joomla provides you enough tools to create a set or menu seamlessly. We hope through this article, you have understood a basic setting on how to create a menu in Joomla. 

You can create a more compelling menu with JoomlaShine template. The first-ever Megamenu Builder with drag-n-drop object capabilities for creating an intuitive menu without coding skills required. 

Create Mega menu with JoomlaShine template now