Happy Lunar New Year!

20% DISCOUNT

Blog

Your go-to resource for Joomla knowledge, tutorial, information and latest news in Joomla world

Create a Joomla Menu In 3 Simple Steps

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

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

Create a new Joomla 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.

Add new menu items

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.

Choose Single Article as 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.

Create a menu module

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.
Setup menu module

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 display in frontend

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.

All Joomla menu item types

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.

Setup partent menu

It will show in the back-end like this:

Sub menu shown in backend

And in frontend:

Dropdown menu shown 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.

Ordering option in Joomla 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:

Update meta tag for a Joomla menu

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.

Add icon next to your menu

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.

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. 

How to create a Joomla article - Step-by-step Guid...
JSN Attorney - Joomla Template for the best law fi...
 

Comments (0)

There are no comments posted here yet

Getting Started Series

Step-by-step guide to build quality website with JSN Template

Learn More