Home > Articles > Web Development

  • Print
  • + Share This
This chapter is from the book

Menus and Menu Items

If you have been following along step by step, you have now created several articles and categories. However, if you look at the front end of your site, it does not look any different. That is because we have not done anything to display the pages. There are a lot of ways to display content in Joomla!, but the most important is through the use of menus and menu items. You currently have one menu on the front end of your site, and it displays one menu item, a link to the home page, which, as of now, is blank. What we will do next is change the home page by changing the Home menu item.

Menu Manager

You can access the Menu Manager by navigating to Menus in the top menu of the Control Panel and clicking Menu Manager. The Menu Manager will show the existing menus. The table columns show data associated with each menu:

  • Title: This is the name of the menu. You can reach an item on a menu by clicking its title.
  • Menu Type: This is the unique name of the menu. Each menu must have a unique name. Although the name is linked for editing, there are almost no circumstances in which you should edit it; doing so can have serious consequences.
  • Published: This is the number of published individual menu items. Menu items have states just as articles and categories do.
  • Unpublished: This is the number of unpublished individual menu items.
  • Trashed: This is the number of individual menu items that have been deleted but not yet removed from the menu trash.
  • Modules: This is the number of modules with which a specific menu is associated. Menus are displayed on a site using modules. Sometimes you will want to display the same menu in several different modules.
  • ID: This is a unique number that is assigned to each menu.

Menu Items

To access the menu items for a menu, you can click the menu name, click on the Menu Items link in the submenu, or navigate to it by using the top menu and going to Menus and then selecting the menu you want to edit from the list of existing menus.

Once you have gone to the Menu Item Manager screen for that selected menu, you will see a list of existing menu items, if any. You will also see a toolbar with a very similar set of options to those for editing an article. For example, you can click New to create a new item, or select an item and click Edit to change it. You can also change the state of menu items. There is batch processing to handle move, copy, change access level, and change language. Two additional buttons are Home and Rebuild. Rebuild should be clicked only if you have made extensive changes to the menu structure. Home allows you to set the home page for your site. This is the page that people will see when they visit yourdomain.com without any additions to the end of the URL. You must always have a home page for your Joomla! site to work.

In the Menu Item Manager, click New. The screen will look as in Figure 5.9.

Figure 5.9

Figure 5.9. Menu item creation screen in (A) Joomla! 3 and (B) Joomla! 2.5

The first step in creating a menu item is to select a type. To do this, click the Select button. This will give you a list of types. In Joomla! 3 the initial list gives general headings that should be clicked to see specific listings. In Joomla! 2.5 the entire list is shown without the need to click.

  • Contacts: This allows you to create links to a single contact, a category of contacts, featured contacts, or a list of all contact categories. Contacts are created and managed using the Contact component located in the Components menu.
  • Articles: This allows you to create links to individual articles or to articles grouped by category, a group of featured articles, and a list of article categories. If you select a group type of category, you can choose a Blog layout showing the introductory text of the articles of the group, or a List layout, which will show the titles and article information in a tabular list.
  • Smart Search: This allows you to make links to Smart Search. There are many variations of menu links within the Smart Search type.
  • News Feeds: This allows you to create a menu link to any news feeds you have configured using the News Feed Manager located in the Components menu to a list of news feeds in a category, or to a list of all news feed categories.
  • Search: This allows you to create a menu link to a detailed search page.
  • User: This allows you to create a menu link to items related to users on your site such as login, registration, reminder for lost passwords and usernames, user profile (which displays a profile), and edit user profile (which allows users to edit their profiles).
  • Web Links: This allows you to create a menu link to a category of Web links you have created using the Web Links component located in the Components menu and to a list of all Web link categories. You can also create a menu item for a submission form to allow users to submit Web links to your site.
  • Wrapper: The Wrapper menu item allows you to display an outside page link inside your site using an HTML iframe. Wrapping an external site inside your site can be useful if you want your users to view and be able to navigate another site but still have your site and its navigation available to them.
  • System Links: These allow you to add an External Link (to a location outside your site); a Menu Item Alias, which allows you to link to an existing menu item (you should always use this when making a second link to the same content); and Text Separator, which creates a menu item type that acts as a spacer between other menu items. You can apply a graphic or text to it.

As you add components and extensions, new menu item types may become available that are specific to those components or extensions. After you have selected a menu item type, you will be directed to the screen that allows you to configure the menu item and edit the menu item parameters. These parameters change from menu type to menu type.

Article Menu Types in More Depth

The most commonly used menu item types for articles are Single Article, Category List, Category Blog, and Featured. In this section we will briefly review these menu item types, giving you a quick rundown on some of the basic parameters that are common to all the menu item types.

Single Article

We will start by creating a menu item linking to one of the articles created earlier. In this case, select Single Article. Once you have done this, a new field will appear directly beneath the menu type in Joomla! 3 or on the upper-right side of the editing area in Joomla! 2.5 as shown in Figure 5.10. This field will allow you to select a specific article to link. Select an article (such as “First Article”) and save the menu item.

Figure 5.10

Figure 5.10. Menu item field for selecting an article in (A) Joomla! 3 and (B) Joomla! 2.5

Now go to the front end of your site and refresh the page. Your new menu link should now be on the menu beneath the Home link. Click on it and you will see your article as shown in Figure 5.11.

Figure 5.11

Figure 5.11. Site with a Single Article menu link on the menu, displaying the linked page

Category Blog

The Blog layout will allow you to set up a page that has the introductory text from a number of articles in one combined view. The page will include “Read more” links to the full articles. You must select the category you want to display. If we make a Blog menu link to the Uncategorised category and follow the link in the menu, it appears as in Figure 5.12.

Figure 5.12

Figure 5.12. Category Blog layout

Category List Layout

Category List layouts allow you to show a list of available articles in a category in a table. Figure 5.13 shows a Category List layout as it would appear on the front end of your site.

Figure 5.13

Figure 5.13. Category List layout view on the front end

Featured Layout

The Featured layout is similar to the idea of a front page in a print newspaper. It displays selected articles from a number of different categories in a blog-style layout. To place items in the Featured layout, when editing an article, set the Featured field to Yes. Featured articles are marked with yellow stars when the list of articles is shown, as in Figure 5.14.

Figure 5.14

Figure 5.14. Making an article Featured

The Home menu item is already a Featured menu link. Now if you click on the Home menu link, you will see your Featured article or articles as shown in Figure 5.15. (We featured two articles for this example.)

Figure 5.15

Figure 5.15. The home page now displays the Featured articles.

Create Article

This view allows users with appropriate permissions to create a new article from the front end of the Web site. We will examine this in more detail in Chapter 6.

  • + Share This
  • 🔖 Save To Your Account