# Menu Items

### Overview

In this section, we will learn how to create menu items to access JomDirectory.

Menus are used to control website navigation and are a set of menu items. Menu items provide the navigational experience to your users. The menu items in our case must point to the JomDirectory.

### Creating Administration Menu Links

<p class="callout info">This step is not needed if new installation being made.</p>

Go to the System -&gt; Administrator modules and insert new. Than choose Administrator Menu. From the presets, select Comdev and place it under menu position. Do the same for the JomDirectory:

<span class="confluence-embedded-file-wrapper confluence-embedded-manual-size">![](https://wiki.comdev.eu/download/attachments/5734794/screenshot-2021-12-22-19-30-33-536.jpeg)</span>

### Creating Menu Items to access JomDirectory

<div bis_skin_checked="1" class="confluence-information-macro confluence-information-macro-note conf-macro output-block" data-hasbody="true" data-macro-name="note" id="bkmrk-creating-an-items-me"></div><p class="callout warning">Creating an Items menu link is mandatory. If you have a multilingual site, ensure that you create an Items menu link for each language. You can hide this menu link, but it needs to be created nonetheless. Though you are creating an Items link that does not point to any category or address, you can create other links with Items menu type that can point to an address or a category once main Items link has been created.</p>

To create menu items with Items menu item type, do the following:

1. Click **Menus** &gt; **&lt;your\_menu&gt;** &gt; **Add New Menu Item**.
2. Provide a title in our case is **Latest Listings** in the **Menu Title** field. Now, since the Latest Listings menu item provides a list of all the latest postings on the site, we have selected the menu type as Items. The Alias field will build URL for the site. When a search is done this will be the landing page for the search results as well.
3. Provide the options as seen in the following image:  
    <span class="confluence-embedded-file-wrapper confluence-embedded-manual-size">![](https://wiki.comdev.eu/download/attachments/5734794/Business%20Pages%20-%20Administration%20-%20Menus_%20Edit%20Item%20-%20Google%20Chrome%202016-05-17%2019.05.55.png)</span>  
    **Screen 3:** Items menu item screen
4. Provide the values based on the following table.
    
    <div bis_skin_checked="1" class="table-wrap"><table class="wrapped confluenceTable tablesorter tablesorter-default stickyTableHeaders" role="grid" style="padding: 0px;"><colgroup><col></col><col></col></colgroup><thead class="tableFloatingHeaderOriginal" style="position: static; margin-top: 0px; left: 365px; z-index: 3; width: 930px; top: 40px;"><tr class="tablesorter-headerRow" role="row"></tr></thead></table>
    
    </div><table class="wrapped confluenceTable tablesorter tablesorter-default stickyTableHeaders" role="grid" style="padding: 0px;"><tbody aria-live="polite" aria-relevant="all"><tr role="row"><td class="confluenceTd">**Menu Item Type**
    
    </td><td class="confluenceTd">Click **Select**. A pop-up is displayed. In this case, since we are creating the Items menu item, click **Directory** &gt; **Items** from the list.
    
    </td></tr><tr role="row"><td class="confluenceTd">**Category**
    
    </td><td class="confluenceTd">Select the appropriate category if creating direct category link.
    
    </td></tr><tr role="row"><td class="confluenceTd">**Address**
    
    </td><td class="confluenceTd">Select the appropriate address if, creating direct address link.
    
    </td></tr><tr role="row"><td class="confluenceTd">**Link**
    
    </td><td class="confluenceTd">This field is auto-populated based on the menu item type selected.
    
    </td></tr><tr role="row"><td class="confluenceTd">**Target Window**
    
    </td><td class="confluenceTd">Select the parent for this menu item.
    
    </td></tr><tr role="row"><td class="confluenceTd">**Template Style**
    
    </td><td class="confluenceTd">Select the template style you want for this menu.
    
    </td></tr></tbody></table>
5. Click **Save**.

Ensure that you see a green tick next to this menu item. The green tick indicates that the item is published. To publish an item, select the checkbox next to the item and click **Publish**.

To view the created menu item, go the front end of your site. The new menu item and it's alias is displayed and will be used for search results:

If you called it - Latest Items than search results page will be www.mydomain.com/latest-items.

If you do not create this menu search results URL will be: www.mydomain.com/components/jomdirectory

##### <span style="color: rgb(38,50,56);">Create menu links for each category</span>

It is very important to notice that <span style="color: rgb(38,50,56);">listing details and proper URL's does not build if the category menu is missing (each category must have a link). Y</span>ou have to ensure that for each category on your site, you create a corresponding link in the Joomla menu. The best approach is to create a separate Joomla menu e.g. Categories and link each category there.

## <span style="color: rgb(38,50,56);"><span class="confluence-embedded-file-wrapper">![](https://wiki.comdev.eu/download/attachments/5734794/Layout_%20Simple%20-%20Google%20Chrome%202016-05-17%2019.03.39.png)</span></span>

### Creating Menu Items to access the Category Tree

The categories created in the component can be seen in the following format on the site depending on the layout selected.

<span style="line-height: 1.4285715; background-color: transparent;"><span class="confluence-embedded-file-wrapper confluence-embedded-manual-size">![](https://wiki.comdev.eu/download/attachments/5734794/Unnamed%20image.png)</span>  
</span>

**Screen 1:** Category page screen

<div bis_skin_checked="1" class="confluence-information-macro confluence-information-macro-note conf-macro output-block" data-hasbody="true" data-macro-name="note" id="bkmrk-ensure-that-for-each"><div bis_skin_checked="1" class="confluence-information-macro-body">Ensure that for each category on your site, you create a corresponding link in the Joomla menu. This is important for SEO and module positioning. If this linking is not created, you may not be able to access the detailed listing view.</div></div><span style="line-height: 1.4285715; background-color: transparent;">For the Category screen to appear in your required format, you can edit the JomDirectory settings for that Menu item. The options seen for JomDirectory settings are as follows.</span>

**<span class="confluence-embedded-file-wrapper confluence-embedded-manual-size">![](https://wiki.comdev.eu/download/attachments/5734794/Business%20Pages%20-%20Administration%20-%20Menus_%20Edit%20Item%20-%20Google%20Chrome%202016-05-17%2019.07.36.png)</span>**

**Screen 2:** Category Tree menu item screen

The following table explains different options that you can edit.

<div bis_skin_checked="1" class="table-wrap" id="bkmrk-columns-count-choose"><table class="wrapped confluenceTable tablesorter tablesorter-default stickyTableHeaders" role="grid" style="padding: 0px;"><tbody aria-live="polite" aria-relevant="all"><tr role="row"><td class="confluenceTd" colspan="1">**Columns Count**</td><td class="confluenceTd" colspan="1">Choose number of columns to be displayed</td></tr><tr role="row"><td class="confluenceTd" colspan="1"><div bis_skin_checked="1" class="control-label">**<label for="jform_params_type">Display</label>**</div></td><td class="confluenceTd" colspan="1">Choose to show Products or Listings</td></tr><tr role="row"><td class="confluenceTd" colspan="1">**Start level**</td><td class="confluenceTd" colspan="1">Choose start level category to be displayed</td></tr><tr role="row"><td class="confluenceTd">**Enable Image**

</td><td class="confluenceTd">Enable category images that are displayed

</td></tr><tr role="row"><td class="confluenceTd">**Enable Count**

</td><td class="confluenceTd">Enable item count

</td></tr><tr role="row"><td class="confluenceTd">**Enable Subcategories**

</td><td class="confluenceTd">Enable to show subcategories

</td></tr><tr role="row"><td class="confluenceTd">**Enable Category Index**

</td><td class="confluenceTd">Enable to display category index

</td></tr><tr role="row"><td class="confluenceTd">**Choose Layout**

</td><td class="confluenceTd">Select from the following layout options:

- Use Global
- Category Tree
- Category List
- Category Float Layout

</td></tr><tr role="row"><td class="confluenceTd">**Category Image Width**

</td><td class="confluenceTd">Define the category image width in pixels

</td></tr><tr role="row"><td class="confluenceTd">**Category Image Format**

</td><td class="confluenceTd">Select from the following format options:

- 1:1
- 4:3
- 16:9

</td></tr></tbody></table>

</div><div bis_skin_checked="1" class="confluence-information-macro confluence-information-macro-information conf-macro output-block" data-hasbody="true" data-macro-name="info" id="bkmrk-this-link-creates-a-"><div bis_skin_checked="1" class="confluence-information-macro-body">This link creates a Categories Tree page if you would like to link to a direct category, use Items Menu and select a category under Details Tab. </div></div>### Creating Menu to access JomDirectory Front Admin

To create menu items with Front Admin menu item type, do the following:

1. Click **Menus** &gt; **&lt;your\_menu&gt;** &gt; **Add New Menu Items**.
2. Provide a title as **Front Admin** and the alias as **front-admin** in the Menu Title field.
3. Provide the options as seen in the following image:  
    <span class="confluence-embedded-file-wrapper confluence-embedded-manual-size">![](https://wiki.comdev.eu/download/attachments/5734794/Business%20Pages%20-%20Administration%20-%20Menus_%20Edit%20Item%20-%20Google%20Chrome%202016-05-17%2019.11.30.png)</span>  
    **Screen4:** JomDirectory Front Admin menu item screen
4. Click **Save**.

#### Front Admin Options

For the Menu to be able to access the JomDirectory Front Admin, certain settings need to be made. The following table shows the three menu links that need to be made and linked with JomDirectory Options. You can create these 3 menu items anywhere on the site e.g. link them under User Menu.

<div bis_skin_checked="1" class="table-wrap" id="bkmrk--6"><table class="wrapped confluenceTable tablesorter tablesorter-default stickyTableHeaders" role="grid" style="padding: 0px;"><colgroup><col></col><col></col><col></col><col></col></colgroup><thead class="tableFloatingHeaderOriginal" style="position: static; margin-top: 0px; left: 325px; z-index: 3; width: 1332px; top: 40px;"><tr class="tablesorter-headerRow" role="row"></tr></thead></table>

</div><div bis_skin_checked="1" class="wiki-content" id="bkmrk-profile-edit-menu-li"><div bis_skin_checked="1" class="table-wrap"><table class="wrapped confluenceTable tablesorter tablesorter-default stickyTableHeaders" role="grid" style="padding: 0px; width: 107.161%;"><tbody aria-live="polite" aria-relevant="all"><tr role="row"><td class="highlight-green confluenceTd" data-highlight-colour="green" style="width: 15.3263%;">##### Profile Edit Menu Link

</td><td class="highlight-green confluenceTd" data-highlight-colour="green" style="width: 15.6996%;">This link should point to Edit profile menu item created using Edit User Profile menu item type.

</td><td class="highlight-green confluenceTd" data-highlight-colour="green" style="width: 26.0816%;">1. Click **Menu** &gt; **&lt;your\_menu&gt;**&gt;**Add New Menu Item**.
2. Provide the Title as **Edit Profile** and the menu item type as **Edit User Profile**.
3. Click **Save**.

</td><td class="highlight-green confluenceTd" data-highlight-colour="green" style="width: 42.8925%;"><div bis_skin_checked="1" class="content-wrapper"> <span class="confluence-embedded-file-wrapper confluence-embedded-manual-size">![](https://wiki.comdev.eu/download/attachments/5734794/Edit_Profile.jpg)</span></div></td></tr><tr role="row"><td class="highlight-red confluenceTd" data-highlight-colour="red" style="width: 15.3263%;">##### Admin Menu Link

</td><td class="highlight-red confluenceTd" data-highlight-colour="red" style="width: 15.6996%;">This link should point to the login form menu item created using Login Form menu item type.

</td><td class="highlight-red confluenceTd" data-highlight-colour="red" style="width: 26.0816%;">1. Click **Menu** &gt; **&lt;your\_menu&gt;**&gt;**Add New Menu Item**.
2. Provide the Title as **Login Form** and the menu item type as **Login Form**.
3. Click **Save**.

</td><td class="highlight-red confluenceTd" data-highlight-colour="red" style="width: 42.8925%;">The following image shows how the Login Form menu item is used

[![Bez nazwy.jpeg](https://wiki.comdev.eu/uploads/images/gallery/2024-03/scaled-1680-/U7Obez-nazwy.jpeg)](https://wiki.comdev.eu/uploads/images/gallery/2024-03/U7Obez-nazwy.jpeg)

When a user is not logged into the front page, he will be redirected to the built-in Joomla login form. After successful login, he will be redirected to the JomDirectory Front Admin.   
The following image shows the redirect URL that needs to be provided. The value you provide in the Login Redirect field depends on the following:

<div bis_skin_checked="1" class="content-wrapper">- <span class="nolink">http://domain.com/index.php/front-admin</span> - Use if URL rewriting is not applicable.
- <span class="nolink">http://domain.com/front-admin</span> - Use if URL rewriting is applicable.

</div>In our example, we are using the <span class="nolink">http://domain.com/front-admin</span> URL as shown in the following image where front-admin is the alias of the [JomDirectory Front Admin Menu Link](https://wiki.comdev.eu/display/JD2/Menu+Items#MenuItems-front-admin):

</td></tr><tr role="row"><td class="highlight-yellow confluenceTd" data-highlight-colour="yellow" style="width: 15.3263%;">##### Profile View Menu Link

</td><td class="highlight-yellow confluenceTd" data-highlight-colour="yellow" style="width: 15.6996%;">This link should point to the user profile created using User Profile menu item type.

</td><td class="highlight-yellow confluenceTd" data-highlight-colour="yellow" style="width: 26.0816%;">1. Click **Menu** &gt; **&lt;your\_menu&gt;**&gt;**Add New Menu Item**.
2. Provide the Title as **User Profile** and the menu item type as **User Profile**.
3. Click **Save**.

</td><td class="highlight-yellow confluenceTd" data-highlight-colour="yellow" style="width: 42.8925%;"><div bis_skin_checked="1" class="content-wrapper"> <span class="confluence-embedded-file-wrapper confluence-embedded-manual-size">![](https://wiki.comdev.eu/download/attachments/5734794/User_Profile.jpg)</span></div></td></tr></tbody></table>

</div></div>**Now link menus with JomDirectory Options**:

Make the following settings for the Front Admin are made in the JomDirectory options for the user to be redirected correctly to the Front Admin, when he is not logged in.

<div bis_skin_checked="1" class="wiki-content" id="bkmrk-click-system-%3E-contr">1. Click **System** &gt; **Control Panel**.
2. Under **Extensions**, click **JomDirectory**.
3. Click **Options** in the top right-hand corner of the screen.
4. Click the **Front Admin** tab.
5. Change the **Profile Menu Link**, **Login Menu Link**, and **View Profile Menu Link** field as per the following image.  
    <span class="confluence-embedded-file-wrapper confluence-embedded-manual-size">![](https://wiki.comdev.eu/download/attachments/5734794/JomDirectory_FrontAdmin.jpg)</span>  
    **Screen5:** JomDirectory Front Admin options
6. Click **Save**.

</div>The Front Admin lets users add listings in the front of the site. For more information about how to add listings, see [Front Admin](https://wiki.comdev.eu/display/JD2/Front+Admin).

<div bis_skin_checked="1" class="wiki-content" id="bkmrk--9"></div><div bis_skin_checked="1" id="bkmrk--10"></div>