JMB Tree Pro is a menu module for Joomla! with lot of features that allows you to create professional menus with minimal time. Please note that JMB Tree and JMB Tree Pro are absolutely different modules and have different interface! Pro version is not extended version of JMB Tree and was written as a new module.
The module can be installed as typical Joomla extension. Go to Administrator Panel > Extensions > Manage > Install > Upload Package. JMB Tree Pro has implementation of Joomla Update System, so you will be informed about new available versions and can update the module in a few clicks via Administrator Area.
Start Level - Level to start rendering the menu at. Setting the start and end levels to the same # and setting 'Show Sub-menu Items' to yes will only display that single level.
End Level - Level to stop rendering the menu at. If you choose 'All', all levels will be shown depending on 'Show Sub-menu Items' setting.
Show Sub-menu Items - Expand the menu and make its sub-menu items always visible.
Use menu images - If for a menu items images are set you can force not to use them. This will work for all menu items.
Layout - Use a layout from the supplied module or overrides in the templates.
Style - Available options depends on selected Layout. Typically each layout comes with 2-3 styles.
Menu Class Suffix - there are additional modificators that are in use in some layouts. These modificators can change layout details. To use modificators you have to add class in Menu Class Suffix param.
A list of core classes for various layouts:
jmb-tree-nav-icons-opposite - Opposite icons position. By default it is left for LTR and right for RTL. The modificator inverts default position.
jmb-tree-nav-horizontal - the modificator hides child levels. Parent level displays horizontally. By default there is vertical position and all levels are displaying in the module.
jmb-tree-nav-fullwidth - Fullwidth dropdown menu with columns. The width of column is 220px by default, but you can set another value in params. But if you are using fullwidth class, the width will be in percentage and proportionally to the total menu width.
jmb-tree-nav-divider - Vertical line between columns
jmb-tree-nav-right - menu opens on right
Responsive visibility - each layout can be set to various responsive visibility where it will be displayed:
These options gives you the control for menu appearance and you can set which device the menu will be appeared on.
In some cases yyou can use parent menu item as typical link which leads to existing page. In the same time this menu item has nested items. There is no problem when you hover such items by mouse. But if you use click or keypress as event, there is a need to distinguish functional purpose of link following and display of nested items. To reach such result, the menu item divides into two parts: link and switcher. But even such way can cause an inconvenience to users, so try whenever it is possible, use links with hash (href="#") for parent menu items. The layout can use separator and header as menu items. In such case separator menu item also is a separated element.
Without manual selection - if you set it to "Yes", all menu items will be displayed without manual selection. It can be useful when you don't need to constuct custom menu and need to display all items.
Multiple open items - option to open multiple items. Actual for Accordion and Offcanvas.
Submenu expands by - Submenu expands by Hover or by Click. Actual for Dropdown, Dropline and Megamenu.
Type Menu - select type of menu:
Select Menu - here you can select the menu.
Base Item - select a menu item to always be used as the base for the menu display. You must set the Start Level to the same level or higher than the level of the base item. This will cause the module to be displayed on all assigned pages. If Current is selected the currently active item is used as the base. This causes the module to only display when the parent menu item is active.
You can use menu items or Joomla! categories that were created in Articles Manager ( com_content ). In first case you must select which menu should be used. In second case all created categories will be listed in the table below (back-end side).
There are following settings available to each table item:
For best work you can use Mark All / Inverse switchers to select / deselect all checkboxes.
Show - show or hide menu item. As a result, you can manually set which items to show. This method has a backside: if you use menu type and add new menu items after publishing the module, new items will not be displayed at the front-end side. Each new menu item must be manually configured in the module. If you don't need this option - just switch Without manual selection to Yes and show settings will be ignored.
Nofollow - add rel="nofollow" attribute to links
Columns - number or columns for dropdown menu. This param works with Megamenu layout only.
Columns Width - column width for dropdown menu. It is 220px by default or depends on style.
Icon - class for
<i> element inside the link. In such a way we add font icon. Enable Include Font Awesome param if you want additionally to include font icons. If you are using menu type and use Link Image param in the items, then Icon will be an override param.
Base Alias is an important param for categories. In the usual situation, you will need to select Home menu item, i.e. root menu item. In this case your categories will get the following URLs:
And so on...
But you can select another menu item as root, e.g.
/news. In this case the URLs will be as:
There are extra params in Advanced tab that might be useful for you: