The Complete Beginners Guide to Joomla Menus

The Complete Beginners Guide to Joomla Menus

If you followed "The Easiest Workflow to Add Your Joomla Content" post, you learned how to easily create a dozen articles on your site. You practiced that task and built your site using the CASh workflow.

In this lesson, you'll continue using the same site and learn why the task of creating its menu links must follow the same CASh workflow.

Menu links allow visitors to find pages on your site. Without menus, all your visitors would be stuck on the home page. In Joomla, menu links also have substantial control over how your page is laid out and displayed.

At the end of this practical lesson, you'll be able to do the following:

  • Understand how Joomla menus work
  • Categorize your menu links
  • Add your menu links
  • Show your menus
  • Understand more advanced menu layout options.

Categorizing Your Menu Links

We’ve already created links to many of our articles in the Main Menu, but there are more menus on our site. Let's see one of those menus in action.

  • Use the Login Form module on the front of your site to log in:

Use the Login Form module on the front of your site to log in

  • The Login Form module will change to showing your name and a "Log out" button. You'll also see a new "User Menu" module:

You'll also see a new 'User Menu' module

These five links are helpful for your site's users.

  • For example, click on "Your Profile", and you can update your account details:

click on 'Your Profile', and you can update your account details

  • Click on "Submit an Article", and you have the ability to write articles from here. This feature makes it easy for users to write content without needing to log in to the administrator area.

Click on 'Submit an Article'

We organized our articles using categories. We organize our menu links using menus.

  • Go to the administrator area of your site and hover over "Menus". You'll see both "Main Menu" and "User Menu".

Go to the administrator area of your site and hover over 'Menus'

Let's see how to use the CASh workflow for menus. We're going to create a menu for our Information links. These are some of the most important articles about Joomlaville, so we want them available on every page.

Step #1. Categorize

First, we'll create the menu to hold our Information links:

  • Go to "Menus", "Manage", and then "Add New Menu":

Go to 'Menus', 'Manage', and then 'Add New Menu'

  • Title: Information Menu
  • Menu Type: information
  • Description: This menu has links to Information articles
  • Click "Save & Close".

Click Save & Close

Step #2. Add

Now let's create links to our Information articles.

  • Go to "Menus", "Information Menu", then "Add New Menu Item".

Go to Menus, Information Menu, then Add New Menu Item

  • Menu Title: History
  • Menu Item Type: Single Article. You'll find this by clicking "Select" and then the Articles slider:

Click Select and then the Articles slider

  • Click "Select" next to "Select Article":

Click Select next to Select Articles

  • Click "History". If it helps, you can use the search box in the pop-up window:

Click 'History'

  • Click "Save & Close".
  • If you don't immediately see your new History link, use the dropdown filters to choose "Information Menu":

use the dropdown filters to choose 'Information Menu'

Let's repeat this process for our other two information articles:

  • Go to "Menus", "Information Menu", then "Add New Menu Item".
  • Menu Title: Location
  • Menu Item Type: Single Article
  • Select Article: Location
  • Click "Save & Close".
  • Repeat the process for the Climate article. When you're done, your list of menu links will look like this:

Repeat the process for the Climate article

Step #3. Show

At the moment, no-one can see our menu links, so let's make them visible. With menus, the "Show" part of the workflow is handled by modules.

  • Go to "Menus", then "Manage".
  • Click "Add a module for this menu".

Click 'Add a module for this menu'

You'll see a pop-up window.

  • Title: Joomlaville Information
  • Position: Right
  • Click "Save & Close" in the bottom-right corner.

Click Save & Close

Visit the front of your site, and the new menu will appear on the right sidebar:

Visit the front of your site

Dropdown Menus

Creating a new menu isn't the only way to organize your menu links. You can also add more links using dropdown links. These organize menu links and also help you to save space. Let's see how dropdown menus work, using the example of our Attraction links.

  • Go to "Menus", "Main Menu", and then "Add New Menu Item".
  • Menu Title: Train Station
  • Menu Item Type: Single Article
  • Select Article: Train Station

So far, we haven't done anything new. The trick when creating dropdown menus is to use the "Parent Item" option.

  • In the "Parent Item" dropdown, choose "Transport":

In the 'Parent Item' dropdown, choose 'Transport'

  • Click "Save & Close" and visit the front of your site.
  • Hover over the "Transport" link, and you'll see a "Train Station" dropdown.

Hover over the 'Transport' link

Let's repeat that process for our other transport articles:

  • Go to "Menus", "Main Menu", and then "Add New Menu Item".
  • Menu Title: Bus Station
  • Menu Item Type: Single Article
  • Select Article: Bus Station
  • Parent Item: Transport
  • Click "Save & Close".
  • Repeat for the Airport article.

When you're finished with these two new links, your menu will look this:

  • You menu will look like this

It's worth noting a couple of things about dropdown menus:

  • Not all site designs (called "templates") support dropdown menus.
  • It is possible to create more levels of dropdown menus, although this can get confusing. For example, if you edit your Airport article and choose "Bus Station" as the parent item, this is what you'll see:

if you edit your Airport article and choose 'Bus Station' as the parent item, this is what you'll see

Layout Changes

Until now, our category pages have all shared a standard layout. There's one main article on the top row, and then two columns underneath. This layout is controlled by the menu link.

This layout is controlled by the menu link

Let's see how to change this default layout.

  • Go to "Menus", then "Main Menu".
  • Click "Information".
  • Click the "Blog Layout" tab. You'll see several options, including the ones in the image below:

Click the 'Blog Layout' tab

Notice the "Use Global" text? That means that these settings rely on the site-wide Options screen that we saw in "Joomla Fields Explained". We can override these settings on individual menu links.

If you're not sure what any of these options do, hover over the label and you'll see an explanation:

hover over the label and you'll see an explanation

Lets turn the 1 row, 2 columns layout into a multiple row layout:

  • # Leading Articles: 3

Leading Articles

  • Save the menu link and visit the front of your site. Click the "Information" link, and you'll see the layout has changed. There are now three articles full-width at the beginning of the page:

Save the menu link and visit the front of your site

This was a relatively small change, but it is possible to make larger layout changes. In this example, we'll replace the blog layout with a table layout:

  • Go to "Menus", then "Main Menu".
  • Click "Attractions".
  • Click "Select" next to "Menu Item Type".
  • Choose "Category List":

Choose

You will have to select the Attractions category again after making this change:

  • Choose a Category: Attractions
  • Save the menu link and visit the front of your site. Click the "Attractions" link, and you'll see the layout has changed to a table format.

Click the 'Attractions' link, and you'll see the layout has changed to a table format

If you want to change the appearance of this table, you can edit the Attractions link again. The "List Layouts" tab will allow you to enable and disable features:

The 'List Layouts' tab will allow you to enable and disable features

Practicing the CASh Workflow

Over the course of the last few posts, we’ve been explaining the CASh workflow.

Now that you understand more about menus, you’re ready for a complete practice of the CASh workflow.

We’re going to move through the CASh workflow, from start to finish. Here’s the plan:

  • Categorize: Categories
  • Add: Articles
  • Show: Menu links

We’re going to use the example of parks in Joomlaville.

Step #1. Categorize

First, let’s create the category for our Parks:

  • Go to Content, then Category Manager, and click New.
  • Title: Parks
  • Click "Save & Close". You should now have six categories, as shown in the figure below:

Click 'Save & Close'. You should now have six categories, as shown in the figure below

We’re also going to upload images for our Parks articles, so let’s create the folder for them:

  • Go to "Content", and then "Media".
  • Click "Create New Folder" and create a folder called Parks.

Step #2. Categorize

Second, let’s write our Parks articles. All of the text and images are available at https://ostraining.com/books/j3e/chapter8/.

  • Go to "Content", "Articles", and "Add New Article" to start the process.
  • When you’ve added all three articles, use the Select Category filter to check that your Parks articles are correct. Your screen should look like the one below.

Your screen should look like the one below

Step #3. Show

Now let's go and make a menu for our news:

  • Go to "Menus, "Main Menu", and click "Add New Menu Item".
  • Title: Parks
  • Menu Item Type: Category List
  • Choose a Category: Parks
  • Click "Save & Close" and visit the front of your site. Click the Parks menu link, and you should see the layout shown on the screen below.

you should see the layout shown on the screen below

Congratulations! You’ve just used the entire CASh workflow.

We absolutely recommend that you use the CASh workflow to set up your content. Nearly every time that we find someone who is confused about Joomla, it is because they didn’t follow CASh:

  • Categorize: If you don’t use categories, you’ll soon find that your articles are unorganized and difficult to manage.
  • Add: If you don’t add articles, you’ll have an empty site.
  • Show: If you don’t have any menu links, people won’t be able to see your content.

As you can see, if you skip any of these three steps, you’ll be headed for trouble.

The same thing is true if you try these steps in a different order. For example, many people want to create menu links first. Often this is because they’ve used software like Dreamweaver before, and with Dreamweaver you do create the navigation first.

I’m not going to argue about whether Joomla is better than other software you’ve used before, but it’s important to remember that Joomla is probably different and it requires a different approach.

The approach we recommend for Joomla is the CASh workflow.

What’s Next?

Now that we’ve covered Content, we’re going to turn our attention to Extensions, which are the extra features we can add on to our site.

Each time you were creating menu links in this lesson, you saw a screen like the one below. You undoubtedly noticed that you could link to many more things beyond just articles. In fact, you can link to Contacts, News Feeds, Search, Users, and much more.

you can link to Contacts, News Feeds, Search, Users, and much more.</

In the next post, we show you what all those extra features are and how they can enhance your Joomla site. These extra features are a type of extension called Components.

Additional Reading

Would you like to learn more about how to create a great website with Joomla? Join the Joomlashack Everything Club and instantly download the bestselling book "Joomla 3 Explained" by Steve Burge.