Pro version

1. Getting Started

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.

2. Installation

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.

3. Configuration

Module tab

JMB Tree Pro module settings
JMB Tree Pro module settings
JMB Tree Pro - table with menu items
Table with menu settings.

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.

  • accordion
  • default
  • dropdown
  • dropline
  • megamenu
  • offcanvas

Style - Available options depends on selected Layout. Typically each layout comes with 2-3 styles.

Note: dark style for Accordion and Default layouts must be used with dark Joomla template!

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:
Dropline layout
jmb-tree-nav-icons-opposite - Opposite icons position. By default it is left for LTR and right for RTL. The modificator inverts default position.

Default layout
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 Pro - Default menu layout with child items
Default menu with child menu items.
JMB Tree Pro - Default menu layout. Child items are hidden
Child items are hidden via Menu Class Suffix and parent items displays horizontally.

Megamenu layout
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 Pro - mega menu without suffix
No suffix is used. Columns width has default value 220px.
JMB Tree Pro - mega menu fullwidth
Using a Menu Class suffix we can get fullwidth dropdown menu with columns.
JMB Tree Pro - mega menu with verical navigation divider
Left: standard Mega Menu. Right: menu with vertical navigation divider.

Offcanvas layout
jmb-tree-nav-right - menu opens on right

JMB Tree Pro - offcanvas opens on left
Let's add Menu Class suffix and Offcanvas menu opens on right
JMB Tree Pro - offcanvas menu opens on right
Left: standard Mega Menu. Right: menu with vertical navigation divider.

Responsive visibility - each layout can be set to various responsive visibility where it will be displayed:

  • Mobile
  • Tablet
  • Desktop

These options gives you the control for menu appearance and you can set which device the menu will be appeared on.

Links types and nested menu items

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:

  • Menu items
  • Categories tree

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.

Configuring the menu items

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).

JMB Tree Pro - menu type
Menu type: Menu items or Categories tree

There are following settings available to each table item:

  • Show - checkbox
  • Nofollow - checkbox
  • Columns - select
  • Columns Width - text [string]
  • Icon - text [string]

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.

JMB Tree Pro - example of Font Awesome icons
Example of Font Awesome Icons used in JMB Tree Pro
Note: images are displaying in JMB Tree menu items by default, but you can disable images using Use menu images 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:

yourwebsite.com/category
yourwebsite.com/category/sport

And so on...

But you can select another menu item as root, e.g. /news. In this case the URLs will be as:

yourwebsite.com/news/category
yourwebsite.com//news/category/sport

Advanced Tab

There are extra params in Advanced tab that might be useful for you:

  • Include CSS - If yes own CSS file of the module will be used.
  • Include jQuery - set it to Yes if jQuery is not included.
  • Minifed files - load minified files with style.
  • Include Font Awesome - set it to Yes if you need to include Font Awesome library to display vectorized icons.
  • Show backlink - Display backlink to the website of the extension.