Joomla Menus & Modules — Navigation & Layout Positions Guide

Unlike WordPress where menus are optional decorations, Joomla menus are the primary navigation system. Every page on a Joomla site must be associated with a menu item — if a page isn’t linked to a menu, visitors can’t reach it through normal navigation. Modules are the content boxes that fill the regions around your main content (sidebar, footer, banner).

What You’ll Learn

• How Joomla’s menu system differs from WordPress and Drupal
• Creating menus, menu items, and submenus with dropdowns
• Understanding module positions and how templates define them
• Placing and configuring modules (breadcrumbs, search, latest articles)
• Controlling module visibility by menu assignment

Why Menus Are the Foundation

Think of Joomla’s menu system as a directory of rooms in a building. Every room (page) needs an entry in the directory (menu item). Without the entry, visitors can’t find the room. This is fundamentally different from WordPress, where pages exist independently of navigation.

Module positions are the light fixtures and shelves in each room — they’re built into the walls (template) and you fill them with content (modules). DodaTech’s own site uses this same architecture to place tutorials, search bars, and navigation consistently across pages.

    flowchart LR
    A["Joomla Content Management"] --> B["Menus & Modules<br/><strong>You are here</strong>"]:::current
    B --> C["Joomla Templates & Extensions"]

    classDef current fill:#38bdf8,color:#0f172a,stroke-width:2px;
  

Creating Menus

1. Menus → Manage → New
2. Enter Title (e.g., “Products Menu”) and Unique Name (products-menu)
3. Click Save

Adding Menu Items

1. Menus → [Your Menu] → New
2. Choose a Menu Item Type:

3. Configure:
   • Menu Title — Display text
   • Alias — URL slug
   • Link — The assigned item (article, category, URL)
   • Parent Item — Nest under another item for submenus
   • Published — Show or hide
   • Access — Who can see this item

Menu Hierarchy Example

Main Menu
├── Home               (Featured Articles)
├── About Us           (Single Article)
├── Services           (Category Blog)
│   ├── Web Design     (Category List)
│   └── Development    (Category List)
├── Blog               (Category Blog)
│   ├── Technology     (Category List)
│   └── Design         (Category List)
└── Contact            (Single Contact)

Submenus (Dropdowns)

To create a dropdown submenu:

1. Create the parent menu item normally
2. Create child items and set their Parent Item to the parent
3. Cassiopeia (default template) renders dropdowns automatically — no extra configuration needed

Module Positions

Modules are lightweight content boxes placed in template positions. Each template defines its own set of positions.

Cassiopeia’s Module Positions

┌─────────────────────────────────────┐
│              top-bar                │
├─────────────────────────────────────┤
│      banner (full-width hero)       │
├─────────────────────────────────────┤
│  sidebar-left  │  main   │ sidebar-right │
│  (menu, login) │ (content) │ (modules)   │
├─────────────────────────────────────┤
│            bottom-below             │
├─────────────────────────────────────┤
│          footer (3 columns)         │
└─────────────────────────────────────┘

View your template’s positions by appending ?tp=1 to your site URL (requires enabling in Global Configuration → Template → Preview Module Positions).

Creating a Module

1. Extensions → Modules → New
2. Choose a module type:

3. Configure:
   • Title — Module heading (can be hidden)
   • Position — Where it appears
   • Status — Published, Unpublished, Trashed
   • Access — Who can see it
   • Menu Assignment — All pages, none, or specific items
4. Save

Breadcrumb Module

Essential for navigation:

1. Extensions → Modules → Breadcrumbs
2. Configure: Show Home, Home Text, Show Last item, Text Separator
3. Assign to the breadcrumb position

Latest News Module

1. Extensions → Modules → Articles — Latest
2. Configure category filter, count (number of articles), featured filter, ordering
3. Assign to sidebar or footer

Module Menu Assignment

Control where a module appears:

This is how you show a “Contact Form” module only on the Contact page, or “Latest Products” only on product pages.

Common Mistakes

1. Every Page Needs a Menu Item

If you create an article but don’t link it to a menu item, it’s inaccessible through navigation. Non-menu pages don’t appear in search results either.

2. Too Many Modules in One Position

Crowding a sidebar with 8 modules makes the site look cluttered. Prioritize 3-4 most useful modules per position.

3. Ignoring Menu Assignment on Modules

A module assigned to “All Pages” appears everywhere. If your login module shows on the login page itself, restrict it via Menu Assignment → Only on pages selected.

4. Not Hiding Module Title

Module titles take up space. For well-known modules (Search, Login, Breadcrumbs), set Show Title → Hide for a cleaner look.

Practice Questions

1. What happens to an article that isn’t linked to a menu item?
   Answer: It exists in the database but is inaccessible through normal navigation. Visitors can only reach it if they know the direct URL. It won’t appear in search results.

2. How do you view all available module positions in your template?
   Answer: Append ?tp=1 to your site URL. This requires enabling Preview Module Positions in Global Configuration → Template settings.

3. How do you show a module only on specific pages?
   Answer: In the module editor, use Menu Assignment to restrict visibility — choose “Only on pages selected” and pick specific menu items.

4. Challenge: Create a “Footer” menu with 4 links (Privacy Policy, Terms, Sitemap, Contact). Create a Menu module for it placed in the footer position. Create a Custom HTML module for copyright text in the footer position. Verify the footer appears on all pages.

FAQ

Try It Yourself

1. Create a new menu called “Footer Links”
2. Add 3 menu items: Privacy Policy, Terms of Service, Contact
3. Create a Menu module for “Footer Links” in the footer position
4. Place a Search module in the top-bar position
5. Set the Breadcrumbs module to show on all pages
6. Verify the menu assignment restricts a module to only one page

What’s Next

What’s Next

Congratulations on completing this Joomla Menus Modules tutorial! Here’s where to go from here:

• Practice daily — Consistency is more important than long study sessions
• Build a project — Apply what you learned by building something real
• Explore related topics — Check out other tutorials in the same category
• Join the community — Discuss with other learners and share your progress

Remember: every expert was once a beginner. Keep coding!