Joomla - Adding Menu Items

In this chapter, we will walk through the step-by-step procedure for adding new menu items to Joomla. Menu items can be created in the main menu (menu1), which we have already created in the Joomla - Creating a Menu chapter .

Adding Menu Items

Below are the simple steps to add a menu item in Joomla.

Step 1 − Click Menu → Menu 1 → Add New Menu Item as shown below.

Step 2 − After clicking the Add New Menu Item button, the Menu Manager - New Menu Item page opens as shown below.

You can view the various tabs provided on this page. The Details tab becomes active by default.

There are two main sections under the new menu item −

• Menu Title - Displays the title of the menu item.

• Alias ​​- used as SEF URL. Joomla will automatically fill in the value from the header. It will produce UTF-8 aliases, however it does not allow spaces and underscores.

• Menu item type . The Menu Item Type section specifies the menu item type, such as articles, tags, web links, system links, contacts, etc. Here you can select the menu item type by clicking the Select button . When this button is clicked, a screen appears as shown below.

Menu Title - Displays the title of the menu item.

Alias ​​- used as SEF URL. Joomla will automatically fill in the value from the header. It will produce UTF-8 aliases, however it does not allow spaces and underscores.

Menu item type . The Menu Item Type section specifies the menu item type, such as articles, tags, web links, system links, contacts, etc. Here you can select the menu item type by clicking the Select button . When this button is clicked, a screen appears as shown below.

Click on the menu type Articles , you will get the following screen. Now select Single Article as shown below.

After selecting Single Article , you will get the following screen.

• Select Article - selects an article from the list.

• Link − Specifies the link to the link for the menu item.

• Template style. You can select a template style for your website by clicking the drop-down menu that provides Beez3 - default and Protostar - default styles or template for your default website.

• Target Window - The target window for menu items such as Parent , New Window with Navigation, and New Without Navigation .

• Menu Location - Specifies which menu link will be displayed in the main menu or user menu .

• Parent Item - Selects the parent item by selecting either the Root or Home menu item .

• Status - Displays the status of the article, such as Published , Unpublished, and Trash .

• Default Page − Provides Yes or No options to set the menu item as the default page or home page of the site.

• Access - Allows only selected users from the drop down list, such as Guest, Public, Super Users , Registered, and Special, to view items.

• Language - defines the language of the site. It provides either ALL or English (UK) options.

• Note. Used to enter text information.

Select Article - selects an article from the list.

Link − Specifies the link to the link for the menu item.

Template style. You can select a template style for your website by clicking the drop-down menu that provides Beez3 - default and Protostar - default styles or template for your default website.

Target Window - The target window for menu items such as Parent , New Window with Navigation, and New Without Navigation .

Menu Location - Specifies which menu link will be displayed in the main menu or user menu .

Parent Item - Selects the parent item by selecting either the Root or Home menu item .

Status - Displays the status of the article, such as Published , Unpublished, and Trash .

Default Page − Provides Yes or No options to set the menu item as the default page or home page of the site.

Access - Allows only selected users from the drop down list, such as Guest, Public, Super Users , Registered, and Special, to view items.

Language - defines the language of the site. It provides either ALL or English (UK) options.

Note. Used to enter text information.

After you select a menu item type, an Options tab will be automatically created .

Step 3 − When we click on the Options tab , we get the following screen.

Step 4 − Click on the Link Type tab, we will get the following screen.

• Link Title Attribute - Specifies the description of the title attribute of this hyperlink.

• Link CSS Style − It applies a custom CSS style to the hyperlink.

• Link Image - Uses the image to be used with the hyperlink.

• Add Menu Title - Provides Yes or No options and adds a menu title next to the image. Yes by default .

Link Title Attribute - Specifies the description of the title attribute of this hyperlink.

Link CSS Style − It applies a custom CSS style to the hyperlink.

Link Image - Uses the image to be used with the hyperlink.

Add Menu Title - Provides Yes or No options and adds a menu title next to the image. Yes by default .

Step 5 − Click on Page Display tab , we will get the following screen.

• Browser page title. Specifies the description of the browser page title.

• Show Page Title - Gives a Yes or No option to display the page title.

• Page Title - Specifies the title text of the page.

• Page Class - defines an optional CSS class for styling elements on the page.

Browser page title. Specifies the description of the browser page title.

Show Page Title - Gives a Yes or No option to display the page title.

Page Title - Specifies the title text of the page.

Page Class - defines an optional CSS class for styling elements on the page.

Step 6 − Click on the Metadata tab, we will get the screen given below.

• Meta Description - Used as an optional paragraph that includes a description of the page and is displayed in search engine results.

• Meta keywords are additional keywords that will be used in the HTML page.

• Robots − It defines robotic instructions like Use Global , Index, Follow , No Index, Don't Follow

• Secure - Specifies whether the link should use SSL or a secure site URL. It provides three options such as " Off" , " On" And " Pass"

Meta Description - Used as an optional paragraph that includes a description of the page and is displayed in search engine results.

Meta keywords are additional keywords that will be used in the HTML page.

Robots − It defines robotic instructions like Use Global , Index, Follow , No Index, Don't Follow

Secure - Specifies whether the link should use SSL or a secure site URL. It provides three options such as " Off" , " On" And " Pass"

Step 7 − Module Assignment controls the display of the module on the page by assigning modules in menu items.

Toolbar

Below we have mentioned the details of the functions of the toolbar buttons present when adding menu items .

Save - saves the menu items you have created.

Save and Close - saves the menu item and closes the current screen.

Save and New - The menu item will be saved and a new screen for adding menu items will open.

Cancel - cancel the current action.