I’m here to guide you through creating nested menu items, also known as submenus or dropdowns, in Joomla 5. These allow you to organize navigation hierarchically, making your site user-friendly. In this step-by-step guide, I’ll show you how to set up a submenu using a parent menu item and child items. Let’s get started!
Why Create Submenus?
Submenus (nested) menu items create dropdown or submenu structures, perfect for grouping related content, like articles under a “Services” parent item. In Joomla, and depending on the template you use, a non-clickable parent (e.g., Menu Heading) is used to organize child items that link to specific pages. This setup enhances navigation and works seamlessly with Joomla 5’s drag-and-drop sorting (improved in 5.3.0). This tutorial builds on my previous menu and menu item guides, focusing on creating a dropdown structure.
Step-by-Step Guide to Creating Submenu Items
Follow these steps to create a submenu in Joomla by setting a parent menu item and adding child items. I’ll use a “Services” dropdown as an example.
1. Log In to the Administrator Dashboard
Start by logging into your Joomla 5 Administrator Dashboard at yourwebsite.com/administrator with your login (username and password) credentials.
2. Access the Menu Items
In the left sidebar navigation, choose the menu you want to add items to or modify by going to Menus > [Menu Name] (e.g., Main Menu). This opens the Menu Items screen for the selected menu.
3. Create a Parent Menu Item
Before you create a new menu item for a submenu, this is where it gets a bit tricky. This will depend on the template you are using because there are two types of menus a template or website will have:
- Hover menu: This is the more traditional and commonly used method. When a user hovers their mouse over a main menu item, a drop-down submenu appears. It’s sleek and keeps the interface clean. One of the perks of hover menus is that the parent menu item can still act as a clickable link, taking users to a landing page while also revealing its submenu items.
- Toggle menu: Less common on desktop layouts, toggle menus require the user to click the parent item to display its submenu items. Instead of hovering, the parent menu acts as a toggle, expanding or collapsing the submenu on click. In many templates, this means the parent item isn’t a link, but just a container for toggling child items.
Note: Toggle menus are far more common on mobile layouts, where hovering doesn’t exist. But even on desktops, some modern and accessibility-focused sites choose this approach.
| Feature/Factor | Hover Menu | Toggle Menu |
|---|---|---|
| Interaction Type | Hover (mouse over) | Click (tap or mouse click) |
| Parent Item Linking | Usually can link to a page | Often not linkable (just a toggle) |
| User Experience | Fast and familiar for desktop users | Clear and deliberate for all users |
| Mobile Compatibility | Can be tricky or require duplication | Naturally mobile-friendly |
| Accessibility | Less accessible; requires extra scripting for keyboard and screen reader support | More accessible by default; click/tap is easier to manage for assistive tech |
| Customization | Requires precise hover areas and JS/CSS | Easier to control with toggle logic |
| Best Use Case | Large desktop menus, mega-menus | Mobile-first or accessibility-focused sites |
Toggle Menu
Click the New button to create a parent menu item. In the New Menu Item form, I set:
- Menu Title: A name like “Services.”
- Menu Item Type: I click Select, then choose System Links > Menu Heading to make it non-clickable.
- Menu: Confirm that the correct menu (e.g., Main Menu) is chosen.
- Parent Item: I leave this as “Menu Item Root” for a top-level parent.
Click the Save & New option under the down-arrow of the Save & Close button to create the parent item. This lets you add a new item without leaving the screen.
4. Add Child Menu Items
Now you can begin adding new submenu items to the parent:
- Menu Title: A name like “SEO Optimization”
- Menu Item Type: I select Articles > Single Article, then choose an article (e.g., “SEO Optimization”).
- Parent Item: I select “Services” from the dropdown to nest this item under the parent.
I repeat this step for additional child items, like “Website Audit”, "Custom Design", etc. When done, you can then click Save & Close with the last item you created.
5. Reorder Menu Items (Optional)
In the Menu Items screen, you can use Joomla 5’s drag-and-drop feature to adjust the order of child items under the parent. Child items are indented, showing their hierarchy. This is smoother in Joomla 5.3.0 than in Joomla 4!
6. Check the Submenu on Your Site
Visit your website’s front-end to test the submenu. Hovering over or clicking “Services” should reveal the dropdown with your child items. If the dropdown doesn’t appear, check the menu module’s settings via Content > Site Modules in the left sidebar navigation and ensure the module is published and also check the setting to show submenu items .
Hover Menu
For a hover menu, the steps above will be the same. The only exception is that the parent item type will not be the "Menu Heading" type, but rather it will be a linked item, i.e., an article, category, etc.
Tips for Success
- Use Menu Heading or Text Separator for non-clickable parents to keep navigation clean.
- Ensure your template supports dropdowns—Cassiopeia does, but check your template’s documentation.
- Test submenu behaviour on mobile devices, as some templates handle dropdowns differently.
- Use the Options tab in child menu items to customize display settings, like hiding categories for a streamlined look.
What’s Next?
With your submenu created, your Joomla 5 site’s navigation is more organized! In my next tutorial, I’ll guide you through managing menu modules to fine-tune where and how your menus appear.
Continue to the Next Tutorial: Managing Joomla Modules