In this article you will learn how to create a menu item for the frontend view of your component. This way, you don't need to know the exact URL. Later, a conversion to search engine friendly URLs is possible automatically.
For impatient people
Step by step
In the following overview, the newly added files are marked with a background and the changed ones are outlined.
The menu item in the frontend works differently than the one in the administration area. We create a separate XML file. Later we will use parameters. But for now we keep it straightforward. We add some language strings for text. Later on, we will see how to translate them.
Create the file
components/com_foos/tmpl/foo and add the following code:
<!-- https://raw.githubusercontent.com/astridx/boilerplate/t3/src/components/com_foos/tmpl/foo/default.xml --> <?xml version="1.0" encoding="utf-8"?> <metadata> <layout title="COM_FOOS_FOO_VIEW_DEFAULT_TITLE"> <message> <![CDATA[COM_FOOS_FOO_VIEW_DEFAULT_DESC]]> </message> </layout> </metadata>
The term CDATA, meaning character data, is used for distinct, but related, purposes in the markup language XML. The term indicates that a certain portion of the document is general character data, rather than non-character data or character data with a more specific, limited structure. The CDATA section may contain markup characters (
&). These are not interpreted further by the parser.
title attribute in the
layout tag here is used when we create a new menu item for this component in the administration area.
The text in the
message tag is displayed as a description.
The language string does not stay as it is. It will be translated into different languages. We will work on this later. Here we prepare everything.
Test your Joomla component
- install your component in Joomla version 4 to test it:
Copy the files in the
components folder to the
components folder of your Joomla 4 installation.
A new installation is not necessary. Continue using the ones from the previous part.
- open the menu manager to create a menu item. To do this, click on 'Menu' in the left sidebar and then on 'All Menu Items'.
Then click on the
New button and fill in all the necessary fields.
- find the appropriate
Menu Item Typewith the
- save the menu item.
- switch to the frontend and make sure that the menu item is created correctly and works.