Joomla Vertical Menu Extension

Vertical Menu is a user-friendly, highly customizable, multi-purpose menu solution for Joomla, and many other popular Components. It easily fits to all templates and looks amazing on any device while provide the best performance that you have ever seen, with the perfect combination of the well-optimized codebase and the most recent technologies. It is SEO friendly because it uses valid HTML code which allows search engines to properly index the content of your menu. Vertical Menu has an eye-catching and easy-to-use admin interface with features like fully customizable themes, predefined color schemes, Google Fonts and transition builder for custom menu opening and closing animations. It is device friendly by supporting responsive mode, multiple layouts and touch gestures on mobile devices. Every menu level has predefined module positions, so the levels are extendable with custom content.

Supported Components

- Joomla menus
- Joomla categories & articles
- VirtueMart categories & products
- HikaShop categories & brands
- EasyBlog categories & articles
- K2
- ZOO
- JoomShopping
- MijoShop
- redSHOP

Vertical Menu is an all-in-one solution, as it have 5 different navigation types:

- Slide menu
- Drop-down menu
- Tree menu
- Expanded menu
- Accordion menu

#Slide menu:

Slide menu could be familiar from the smartphones' menu systems. When you open a parent item the sub-level will appear with a sliding animation. You can choose from 6 predefined sliding effects, and you can also create a custom one with the built-in Animation Builder. With this mode the title works like a breadcrumb, so it is easy to follow which parent item is opened. You can navigate back with a simple click or swipe on smart devices.

#Drop-Down menu:

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.
If there is not enough space on the right for the submenus, those will appear on the left side. If there is not enough space on the screen to show all of the items, a scrollbar will appear.
On touch-devices this type of menu will transform to slidemenu for better navigation experience.

#Tree menu

The point of the tree menu type is that the children items will appear right under their parents in a hierarchical tree structure. This menu-type presents the parent-child relationship very well. During the navigation you can expand or collapse the different submenus.

#Expanded menu

This menu type means, that all of your menu items appear. You don't need any click or touch interaction to make them visible. It is good if you would like to show only some menu items, or all of them are important to see.

#Accordion menu

The sub-levels will appear directly under their parents. Each submenu levels can be expand or collapse. When you open a branch, the previously opened will automatically close to save space.

Each types can be shown in 5 different menu positioning:

- Embed mode
- Popup mode
- Left sidebar
- Right sidebar
- Overlay mode

#Embed mode:

This mode is the basic usage of a Joomla module. The Vertical Menu will be placed into the selected position. With this mode the menu can transform into sidebar mode on devices with smaller screen.
The menu automatically able to get the height from the items, or a fix height is also possible. In this case a solid scrollbar will appear if neccessary.

#Popup mode:

With Popup mode you can show the menu in the selected module position, or even on the top left side of your page. At the first time only the opener button is visible, and if you click on it the menu will appear below the button, or if there is not enough space there, above it.
Smooth scrolling navigation is also available feature with this mode. In this case if you click on a menu item the page will scrolled to the specified area. Auto hide feature will able to hide the menu on smaller screens after clicked on a menu item to make the whole content visible.

#Left/Right sidebar:

With this mode the menu will appear from the selected side of the page with GPU accelerated animations. There are 14 predefined effects from the simple one to 3D animations as well. All of them are well-optimized, and also work on mobile devices. The width of the menu is adjustable from the backend, and the menu opening is triggerable from a menu item, not just with its opener button.

#Overlay mode:

Overlay navigation is a new trend in web-design, removing the traditional menu from your sites pages. The special thing about the overlay menu is that it doesn’t have a fixed size like modals, it can cover all the screen or you can set a custom margin around the menu. This type has 12 predefined opening animation and also 6 extra hover transitions on menu items.

Extra features

#Built-in-filter

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. The filter bar is fully designable with selectable magnifier buttons, close icons, and background-color.

#Custom logo & Module positions

With the Vertical Menu you can customize your menu with your own logo which will appear above the menu. It has also built-in module positions in every menu-levels. With this feature you are able to add much more cool things to the menu-levels. Improve the user experience with a google maps integration, a related image or event with an AJAX search.

#Responsive & Mobile Optimized

Vertical Menu is fully responsive and touch-ready for an enhanced mobile experience. All of the animations are well-optimized and also appear on smart devices. With the intuitive gesture support we added a more comfortable way for navigate in the menu system. The whole menu has immediately touch detection for the fastest feedback.

#Smooth scrolling navigation

This feature is perfect for sites with one page layout. The menu-items can scroll to the specified sections.

#Animation builder

The Advanced animation builder will help you to achieve your goals with many customizable parameters. You can define custom animations for the sublevels and for the menu-items as well.

#Powerful API functions

With the API calls you are able to control the menu or get some information about the current state of the module.

#Badges

You can use custom badges for your menu to higlight the important items.

#Different designs by levels

You can set different colors, fonts and icons for each level, so all of your menu-levels has a unique design.

#Advanced font manager

You can set the font family, color, text-shadow and other properties with an intuitive font manager. It supports Google fonts, and you will see the selected font real-time in a sample text.

#Improved menu-item selector

In the module manager you are able to not just select a menu to show, but you can also specify which items will appear.

#Description for menu-items

With Vertical Menu you can also show descriptions for each menu item. All of the related font style settings are adjustable.

#Resizable menu icons with crop/scale

The icon of the menu items are adjustable by size, and also set to crop or scale to the selected size.

#Custom CSS/JS

There are options in the backend of the Vertical Menu to place your own JavaScript code and CSS definition. So you won't need any custom files for customization.

Browser support

- Firefox
- Chrome
- Safari
- Opera
- Internet Explorer 9+

Additional feature list

- 3 Themes: Rounded, Flat, Clean
- 14 SideBar animations
- 18 predefined sublevel animations
- Animated parallax background
- GPU accelerated and 3D animations
- LTR & RTL support
- SEO optimized
- Easy to Customize
- Conditional backend parameters