Skip to content

Gantry Joomla Menu Assignment

Custom Page (Joomla)

This particular feature of Gantry 5 is not found in the Gantry 5 Administrator. Instead, you will see it in Joomla's Menu Manager. You can create a custom page that doesn't necessarily pull from or even have anything to do with your Joomla content by creating a Custom Page menu item.

This menu item can be found under Add New Menu Item > Menu Item Type > Gantry 5 Themes > Custom Page. Once selected, it appears in your menu as any other page would, and can be assigned to an outline, given a layout, and appear on the front end. You can do just about anything you could with a standard menu item, except it is a non-Joomla menu item that doesn't render unnecessary component output such as bootstrap.

Another useful feature of the Custom Page menu item type is that you can choose a particle to act as your page content rather than any articles or common Joomla page content. This makes the Custom Page menu item type especially useful if you are building a page made up entirely of particle and/or modules.

Menu Editor

The Menu Editor panel in the Gantry Admin is where you can configure and refine menus used on the front end of the site. This does not totally replace the Menu Manager provided by the platform, but gives you the ability to quickly and easily add elements, such as in-line particles, to make a better experience for your users.

The Menu Editor administrative panel takes what your CMS' built-in Menu Manager has and enables you to override it. Changes you make in this panel do not in any way affect the way the CMS handles Menu items.

This panel is a Global panel, that is not specific to any outline. It's because of this that the changes you make here will affect all instances of a particular menu as it appears in any outline.

Selecting a Menu

The first thing you will want to do is select the menu you wish to edit. This can be done using the dropdown located near the top of the Menu Editor administrative panel. These menus are sourced from your CMS' Menu Manager. If you want to create a new menu, you will need to do so using the Menu Manager for your particular CMS.

When you have done this, simply select it in this dropdown and its contents will load, ready for you to work with.

If you would like to change which menu loads in a Menu Particle on the front end, you will need to set this in the menu Particle's settings. Switching between menus here only enables you to access the menu's settings, and does not assign the menu to any particular Particle.

Menu Settings

The menu itself has a settings icon (cogwheel) on the right-hand side which gives you the option to access settings that relate to the menu as a whole. These settings may differ between content management systems (CMS).

One common setting is the Base Path which sets the base path by which the menu is rendered. For example, if you would like the menu to render on the front end from the directory down, rather than the full menu as provided by the CMS, this is where you would set it.

Keep in mind that within the Menu Particle, you can further refine this, setting a Base Path as well as the Start Level and End Level which comes in handy when creating a split menu.

In cases where you want to have multiple columns on a drop-down, you may experience issues where your dropdown only displays a single column. If this happens, you can resolve it by setting the setting to Extended or Default and the to either Auto or to a specified width large enough to accommodate your columns.

Menu Item Settings

Each menu item has a set of settings which can be configured to meet your needs. These may vary slightly between CMS, but have the same basic functions. You can activate the Menu Item settings by selecting the cogwheel icon on the right-hand side of the menu item itself.

Here is a breakdown of these settings and what they can do.

Menu Item SettingDescription
Menu Item IDThis is the ID specific to the menu item.
Menu Item TypeSets the type of menu item, controlling how it behaves and the role it plays in the menu.
LinkThe link (relative or absolute) to which the menu item directs the user upon being selected.
Append HashIf you'd like to append a hash at the end of the URL, you can add that hash here.
Link TargetSets the target window behavior for the link. You can set it to either open the link in a new window, or the current one.
Dropdown StyleSets the style of dropdown for sub-menu items that appear under this particular menu item.
Dropdown DirectionSet the direction you'd like the dropdown to lean.
Disable DropdownsIf checked and the item has dropdowns, they will not be rendered.
Dropdown WidthSet the width of the dropdown. Can be set to .
CSS ClassesEnter any CSS class(es) you wish to have apply to the item.
IconPowered by FontAwesome, this feature gives you the ability to add a vector icon to your menu item as it is displayed in the menu.
ImageInsert an Image to the item.
Icon OnlyIf selected, only the icon will render.
SubtitleEnables you to enter a subtitle, displayed below the menu item's title.

Once you have set the settings as you prefer, simply select Apply to save the changes and close the pop-up.

These settings expand on the capabilities of the CMS’ integrated menu system, enhancing them with additional functionality and customization options - but only in cases where the CMS does not already provide this feature and changing these options does not have an adverse affect on the menu's functionality.

In Joomla, for example, the Menu Item ID, Menu Item Type, and Link are provided by the CMS. Images can be as well, but overriding them in the Menu Editor is a visual change rather than a functional one, so you should be able to adjust this setting without issue.

In cases where you want to have multiple columns on a drop-down, you may experience issues where your dropdown only displays a single column. If this happens, you can resolve it by setting the setting to Extended or Default and the to either Auto or to a specified width large enough to accommodate your columns.

Menu Item Types

There are six types of menu items in the Menu Editor. Here is a breakdown of what five of these types are, and the role they play in the menu.

Menu Item TypeDescription
LinkA link directs the user to an internal link within the site.
AliasAn alias points to another Menu item.
External URLThis type of menu item points directly to an external URL.
SeparatorNon-clickable menu item that carries a name, usually used for top-level menus with one or more sub-menus.
HeadingA non-clickable menu item that contains text only.

The sixth type of menu item, which is added and configured in the Menu Editor are Particles. This will allow you to do things like create a block of information that appears in the menu.

In cases where the Menu Item Type is supplied by the CMS, this may not be editable via the Menu Editor as it would conflict with the CMS' settings.

Module/Widget Injection

Particle Injection

Particle injection is possible in the Gantry Menu Editor, enabling you to add Particles to your menu with the same simplicity you can experience from the Layout Manager. The first step involves clicking the Particle button and dragging it to your menu where you would like it to appear. Just like any menu item, its position can be changed at any point by clicking and dragging it.

The popup that appears enables you to both search for and select a particle to use in your menu. Simply click the particle and Select it.

From here, you are taken to the same particle settings popup you see in the Layout Manager as well as in the outline's Particle Defaults administrative panel. In this example, we are adding a Date Particle which displays the current date.

Once you have set up the Particle as desired, simply save your menu and check the front end to see the Particle in your menu.

Injecting modules into your menus is easy with Gantry's Menu Editor. Above the menu in the editor are two buttons. One labeled Module and the other Particle. The Module tool can be clicked and dragged to your menu, bringing up a popup (pictured below) that enables you to select from your site's modules and have one appear within the menu.

This popup has a lot of useful information to help you find the module you are looking for. A search bar located at the top enables you to quickly narrow down your search while the module buttons themselves provide you with information on the module's name, published status, type, and assigned position.

You do not have to assign your modules to any positions to make them work in the menu. By adding the module using the Menu Editor, the module is rendered on the front end as though the module has been assigned to a position within the menu. However, you need to make sure that the module is assigned to display either on all or on certain pages only via the module's menu assignments settings, or else the module may not render.

Practical Example

In this example, we will add a RokAjaxSearch module to the menu. You will need to have RokAjaxSearch installed on your Joomla instance, as well as a module created using Joomla's Module Manager. You do not have to have the module assigned to any specific position for this to work.

Then, from the Gantry Menu Editor, click and drag the Module item to your menu where you would like to have it appear in the menu. You can always adjust its positioning later on by clicking and dragging the menu item.

At this point, you can further refine this module in a popup that appears, giving you access to adjust the module's Module ID and Chrome settings. You also have access to the same Block settings found in Particles, including CSS Classes and Tag Attributes.

Once you have configured your module and set up any additional styling (if required) to make it look great with your menu, you can save your menu and take a look at it on the front end.

Grav does not currently support module injection.