Vertical Menu with Custom CSS

Joomla Vertical Menu Module

This module allows you to display a vertical-style navigation menu on your Joomla site with full customization control over its design and layout.

Core Functionality:

Joomla Vertical Menu module renders a vertical menu based on your selected Joomla menu item set. It supports multi-level navigation and style customization through backend options, enabling seamless integration with your site's visual identity.

Backend Configuration Options:
✅Menu Select which Joomla menu to display in vertical format. This determines the menu items shown on the frontend.

✅Module Class Suffix Add a custom class suffix to the module's container. This is useful for applying different styles through your template's CSS.

✅Background Color Define the background color of the menu container. Use a HEX code (e.g., #ffffff) or color name (e.g., white).

✅Text Color Set the color of the menu item text to match your site's palette.

✅Hover Background Color Choose the background color that appears when a user hovers over a menu item.

✅Font Size Specify the font size (e.g., 14px, 1em) to control the size of the menu text.

✅Border Radius Add rounded corners to the menu and its items by setting the border radius (e.g., 5px for subtle rounding).

✅Font Family Choose a default system or web-safe font (e.g., Arial, Verdana) for the menu text.

✅Item Padding Set internal spacing inside each menu item for better readability and spacing (e.g., 10px 15px).

✅Google Font Name Enter the name of a Google Font (e.g., Roboto, Open Sans) if you want to use a custom font not already loaded by your template.

✅Level 0 Icon (Font Awesome) Add Font Awesome icon class (e.g., fa fa-home) for top-level (level 0) menu items.

✅Level 1 Icon (Font Awesome) Specify Font Awesome icon for first-level submenus.

✅Level 2 Icon (Font Awesome) Set a different icon for second-level submenu items, providing visual cues for nested navigation.

✅Custom CSS Add your own CSS rules to fully override or extend the module’s styling. This allows precise control over animations, transitions, layout, and any additional design tweaks.