With the dropdown menu the children items will appear next to their parents. So lower levels of the menu will follow their parents in a row with 12 predefined or custom opening and closing animations.
Force to full height feature enables to the sublevels will fill the full height of the window.
If there is not enough space on the right for the submenus, those will appear on the left side. If there is not enough vertical-space on the screen to show all of the items, a scrollbar will appear.
On touch-enabled devices this type of menu will transformed to slidemenu for better navigation experience.

Basic Parameters

First you need to select the Type of the menu. You can select from 8 type of the menu. Please note, that maybe not all of the type will be in your list, because only the installed component will appear. You can learn more about each menu type under the Menu content types section.

• Joomla menu
• Joomla content (articles and categories)
• K2
• Virtuemart
• JoomShopping
• HikaShop
• Redshop
• Zoo

With the Navigation type you can set how your menu will behave. There are 5 different types. All of them are described in details under the Menu navigation types section. Now we will describe the Drop-Down menu.

• Slide menu
• Drop-Down menu
• Tree menu
• Expanded menu
• Accordion menu

The Menu positioning option related to where the menu module appear. Here you can select from 4 different positions. All of them are well-described in the other part of the documentation.

• Sidebar LEFT
• Sidebar RIGHT
• Module position
• Popup

Force menu to sidebar under parameter only appears if you select the Module position as menu position. You can set a value that under specified screen resolution the menu will be transformed to the sidebar to keep your site responsive, and will look well on smaller screens, practically on smartphones.

With the Sidebar / Popup width you can set the width of the whole menu.

The Menu max-height parameter you can set a maximum height for the menu items. If there are more items, which is visible in the set height a scrollbar will appear. Set for 0 will automatically adjust the menu's height.

With the Submenu parameter you can set the Width of the submenu, and also the Distance between the levels in pixels. Full height feature is also available. With that option the sublevels will have full height on your window. That would be useful e.g. with sidebar menu position type.

With Show menu-open button in option you are able to select whether you would like to show the menu opener button in the selected module position, or even on the top corner of the whole site. In that case the button will appear always on top.

In Vertical Menu you are also able to set a custom logo image with the Logo image parameter.

With the powerful built-in Filter feature you only need to type a part of the menu item's title or description, and most relevant results will appear in a list below. That is a killer-feature against any other menu solutions on the market. Just type a few characters, then the matched results will appear in moments, and you don't need to browse through the whole menu structure. About designing the filter you can find the details below, under the Theme parameters. You can also fine tune its functionality by Delay and Min-chars parameters.

The Back menu-item will add an back-item to each child-level. This button will only appear from the second menu level, and with that you can easily navigate back to the parent category.

Last but not least here you can find the Theme parameter. In the Vertical Menu, there are 2 themes available: Flat and Clean. Each theme settings will appear in the Theme parameters section.

Type Parameters

After you selected a menu content type above, here you can make settings related for that. You can select which categories will be shown with the Menu-items multiselect, or switch whether the items/products will also appear in the menu under their categories.

Parent item as link will create links from the parent menu items as well, so you can reach the category pages, if you click on them on the frontend.

With the Display count of sub-items you can show a number next to the item, which will shown how many sub-items it have. There are 3 options available, the Yes only the real count means that only the direct sub-items will count. The Yes the aggregated count on each category will also count the sub-items in all category under the upper one. And you can also disable this feature.

Element order is a important parameter. With that you are able to change the order of your menu-items. Choosable options are Component Default, which means that if the component has an ordering for the items, that will work in the menu as well. The other 2 options are alphabetically ascend or descend.

Menu-item description means that with some menu content types you are able to use subtitles with the items. If you enable this option the Description font parameter will appear in the Level settings to able to configure the description appearances.

You are also able to Show menu-item icons next to the menu-items. If you enable this option more parameters will appear:

With Resize menu-item icons you can define a Max-width to your icons which guarantees a uniform appearance for the menu. Enabling Advanced options will let you to set the Width, Height and the resize method of the menu icons. Crop option will cut the images for the selected size. Scale will resize the image for the selected size, and also extend it with transparent background color if neccessary. Menu-item icon border-radius will round the corners of the icon with the selected value in px or %.

Theme Parameters

In this section you can find the related settings of how the menu will appear on your frontend. You can use the predefined Color scheme and Font scheme parameters, and you are also able to set the options manually. Each color setting supported by a smart color-picker for more comfortable use. Please note that the Vertical Menu has conditional backend parameters, so depending on the selected navigation type, menu positioning and theme, some parameters can be hidden.

With Color behind the site option you are able to set the background color behind the site during the 3D sidebar animations.

With the Color behind the menu you can set the background behind the menu in case of 3D menu-level animations. This option only appear in case of Flat theme.

With the Clean theme you can set a Menu background-image for the whole menu. It will automatically fit the height of the menu, and you can also set an overlay-color with the Menu background parameter. Even if you haven't set any background image, the selected color will appear there. If you have set an image, and enable the Animation option, the background image will move in a parallax effect while a child level opening. You can also set the amount of the scrolling with the offsetX.

If you set a light background-image it is worth to set a darker overlay-color as well with small opacity to make the menu item's more readable.

With Burger icon settings you are able to fully customize the menu opener button's properties. By default it has a solid grey color to fit all templates, but you can change it anytime.

Menu margin and Menu border-radius related to the whole module. In case of Sidebar and Popup positions the border-radius option has no effect for the menu.

Title font parameter use our improved font selector, where you can set up all font-related settings:

• Font type
• Font family
• Size
• Color
• Weight
• Decoration
• Alignment
• Alternative font
• Text shadow
• Line height - this will set also the height of the title

You can learn more about the Font manager under Features and hints part of the documentation.

You can also manage the background of the menu title by Title background parameter. In this section there are differencies depending on which theme you have selected. With Flat theme you can set a gradient background color, and with Clean theme you can set a background color with opacity, and also set the colors of the Top and Bottom borders.

The Filter bar is fully designable with selectable magnifier buttons, close icons, and background-color.

You can use 2 type of badges next to the menu items. You can use them by Enable badges option. You can set the color and font settings for the Square badge and the Rounded badge as well. You can also define Border-radius for the rounded badge.

Level specific settings

With the Vertical Menu you can set different designs for each menu level. As with the Theme parameters, the Level settings can also contains different parameters depending on the previous settings.

In the Flat theme the Level background color parameter will appear, so you can define different background colors for the different levels. With the Clean theme there is one background image/color.

With the Menu-item background you can set how the item color's will change on Hover or Active state. You can also define the Top and Bottom Menu-item border color.

With Menu-item Padding you can set padding around the item. You can also define some indent for the lower levels, e.g. you have selected Treemenu or Expanded menu as the navigation type.

Menu-item font related to the item font properties with the previously mentioned Font Manager. In this case, you are able to set different properties for Hover and Active state.

With Description font parameter you can define font-style settings for the menu-item subtitles. It is a conditional parameter, and only appear if you enabled the Menu-item description in the Type parameters.

If a menu-item is a parent, so it has children elements an arrow will appear that shows it has sub-levels. With the Arrow parameter, you can choose from the predefined arrow-icons, set its position that on the left or right side appear next to the menu item. You are also able to define the default color and the color in hover state.

Animation parameters

In this section you are able to select from the predefined animations for the menu-opening effect, and for the animations between the menu levels, and you can also customize them with Advanced settings.

Sidebar animation parameter means that which animation will used for menu opening effect. This parameter is available with Sidebar navigation type and with Module position even if you have also set the Force menu to sidebar under option. You can select from 14 predefined animations. All of them work on mobile devices. Click the button below to check the effects on the demo site.

Sidebar animations - DEMO

Drop transition preset parameter related to the effects between changing the menu-levels. Here you can also select from the predefined list, and set the Duration value. If you have menu icons you can also animate them with the Animate icons parameter.

By enabling the Advanced settings parameter, you can customize the slide transitions. You can define different values for in and out animation, and also can set menu-item animations. This is recommended for advanced users, but everybody can play with it, because by select from the predefined list all settings will reset.

Advanced parameters

Here you can set some parameters, which are in connection with the Joomla CMS, such as Cache and Suffixes.

By enabling the Improve start level handling you will be able to set from which level the menu will start to render, and with the End level value will set the deep of the menu.

Module positions

In the Vertical menu every menu level has predefined module positions, so the levels are extendable with custom content. If you enable the Show module positions all of them will be visible on the frontend with the position names to help you to decide where you would like to place your custom module. You can also change the name of the top and bottom module positions on the main level of the menu as well as the prefix for the sub-levels.

Custom codes

If you would like to create something special for your menu module, such as a small modification on the working behavior, use the API or custom styling you can make it with the Custom CSS and Custom JS parameters.

• < Prev
• Next >