How to Create a Split Menu

A split menu in Joomla! allows you to isolate and display different levels of a single menu tree in completely separate module positions on your website. For instance, you can render your primary, top-level navigation items horizontally across a header module position while simultaneously reflecting the corresponding secondary child items vertically inside a sidebar.

This clean layout strategy keeps your main layout uncluttered without forcing you to manually build and sync separate menu lists. Joomla handles the contextual relationship entirely out of the box using a single menu structure.

Prerequisites

Administrator access to a Joomla site (version 5 or above). See 1.0 Admin Login.

Create a Multi-Level Menu Structure

Before configuring your frontend layouts, you need a single menu hierarchy containing both parent and child elements.

1. Navigate to Menus→Manage and open your targeted menu (e.g., Main Menu).
2. Click New to create your top-level parent pages.
3. Give your new menu item a Title and select some sort of Menu Item Type other than a System Link.
4. Since this item will be in your top-level menu, set the Parent Item in the right sidebar to "- No parent -"
   
5. Click Save & Close.
6. Create additional menu items to serve as subpages by repeating the above steps as needed to provide access to the desired content.
   • For these subpages, locate the Parent Item dropdown menu on the right panel and select the respective top-level item.

Configure the Top-Level Menu Module

Next, you must create a dedicated module that targets exclusively the top tier of your menu tree.

1. Navigate to Content→Site Modules.
2. Click the New button and select Menu as your module type.
3. Title the module appropriately (e.g., Main Navigation - Top).
4. Under the Module tab settings:
   • Select Menu: Choose the multi-level menu you built in Step 1.
   • Start Level: Set this to 1.
   • End Level: Set this to 1 (this forces it to ignore children).
   • Show Submenu Items: Toggle to No.
5. Assign a layout position suitable for primary site navigation, such as menu or navbar.
   
6. Click Save & Close.

Configure the Secondary Submenu Module

The final step is establishing the second module that dynamically outputs subpage links depending on which top-level item a user clicks.

1. Click New in the Site Modules dashboard and select Menu again.
2. Title this module according to its location (e.g., Sidebar Submenu).
3. Adjust the Module tab parameters to capture child levels:
   • Select Menu: Choose the exact same parent menu as your top module.
   • Base Item: Keep it at Current so it responds dynamically to the active section.
   • Start Level: Set this to 2.
   • End Level: Set this to All (or a deeper specific number if you have tier-3 pages).
   • Show Submenu Items: Toggle to Yes.
4. Set the Position box to your secondary region, such as sidebar-left or sidebar-right.
   
5. Go to the Menu Assignment tab and choose Only on the pages selected if you want to explicitly hide this module on flat areas like the landing homepage.
6. Click Save & Close.

Now, when visitors choose a top item on your website, the sidebar module will automatically trigger and surface only the child items living directly underneath that specific section.