JUX Vertical Menu - Joomla Extension

How to Configure JUX Vertical Menu for Joomla

JUX Vertical Menu is not just a way to replace a standard horizontal menu with a polished sidebar. In Joomla, a module like this becomes the link between menu structure, template positions, page assignments, submenu behavior, and the way visitors actually move through the site. In this guide, we will walk through how to prepare your site, install the extension, choose the output mode, configure levels, styles, off-canvas behavior, menu item images, modules inside submenus, and verify the result without breaking navigation.

This article is written for a Joomla site owner or administrator who already understands what menus and modules are, but wants to build a clean sidebar or slide-out navigation without chaotic trial and error. We are not going to repeat the product's marketing copy. Instead, we will go through the entire process: from checking the source menu to diagnosing cases where an item does not expand, the off-canvas panel does not appear, the module shows up on the wrong pages, or the styles conflict with the template.

The core idea is simple: a vertical menu works well only when it is designed as a navigation flow, not as a decorative block. That is why this guide pays close attention to nesting depth, panel width, the behavior of multiple expanded branches, module positions, page assignments, and testing the mobile version.

What a Vertical Menu Actually Solves on a Joomla Site

In standard Joomla, a menu is created as a tree of items and displayed through a module. That is convenient, but a regular horizontal layout is a poor fit for catalogs, knowledge bases, corporate sections, training materials, multi-level service structures, and stores with long category lists. Once the number of items grows, top navigation either stretches too far or hides important sections inside multiple layers of dropdowns. Visitors no longer see the site structure - they see a row of short labels, some of which open only on hover.

JUX Vertical Menu offers a different approach: you can place the menu as a vertical column in a template position or display it as an off-canvas panel that opens when the user triggers it. The official product description and demo page highlight both modes: a static position and a hidden slide-out panel. In practice, that matters because the same set of menu items can work very differently depending on the page's purpose.

The static version makes sense where navigation should remain a constant point of reference. In a documentation section, for example, the left side can hold chapters, subchapters, and quick links. On an eCommerce category page, a vertical panel helps users move through product groups. On a corporate site, it works well for services, departments, branches, and internal sections. Off-canvas is better when the menu needs to stay close at hand but should not take up space: on mobile screens, promo pages, long articles, or templates with limited width.

How JUX Vertical Menu Differs from the Standard Menu Module

The standard Joomla Menu module can also choose a menu, levels, a base item, and page assignments. But JUX Vertical Menu adds an extra visual and behavioral layer: themes, menu width, multiple expanded branches, settings for the top menu, submenu, and menu items, plus separate parameters for individual items through the extended parameters package. The JoomlaUX documentation specifically lists module configuration tabs, top menu styles, submenu styles, menu item styles, and current item parameters.

That is why the extension should be treated as a specialized navigation module. It does not replace Joomla's structure and it does not create content on its own. It takes an existing menu, applies the selected display logic, and helps you build navigation that is denser, more controllable, and more adaptive.

When Vertical Navigation Is Better Than Horizontal

A vertical layout is especially useful when section names vary in length, the structure includes several nested levels, or visitors need to see neighboring items alongside the current page. A horizontal row works well for 5-7 top-level areas, but readability drops quickly once you introduce long names like "Equipment Maintenance Services," "Partner Documentation," or "Categories by Use Case."

A vertical column gives text more room, makes hierarchy easier to read, and does not force the administrator to shorten labels unnaturally. Off-canvas preserves the same logic but keeps the menu hidden until opened. In both cases, it helps to decide up front what matters more: constant visibility of the structure or saving screen space.

Who JUX Vertical Menu Is a Good Fit For - and When Another Approach Makes More Sense

This extension is a good fit for sites where navigation is genuinely more complex than a single top row. That can include service catalogs, Joomla-based online stores, multi-section portals, blogs with long category lists, learning sites, documentation hubs, institutional websites, directories, and corporate knowledge bases. On projects like these, a vertical menu helps expose structure without overloading the header.

For a simple landing page, a small brochure site, or a template that already includes strong mobile navigation, JUX Vertical Menu may be unnecessary. If the menu contains only "Home," "About," "Services," and "Contact," an additional module creates more settings than value. You should also be careful when the template already includes its own off-canvas mechanism. Two separate slide-out menus can conflict in layers, open buttons, background overlays, or scrolling behavior.

A strong signal that the extension is worth installing is this: the site has a menu with several groups, visitors need to move quickly between related sections, and the current template does not provide a flexible enough sidebar or slide-out navigation. If the issue is only the color of the top menu, it is smarter to check the template settings and the standard Menu module first.

Scenarios Where the Module Works Best

• A product or service catalog where you need to show categories, subcategories, and quick access to popular sections.
• A knowledge base where the visitor is reading one article and should be able to see related topics nearby.
• A corporate site where the "Services" section has many nested areas and does not fit in the header.
• A site with a mobile-heavy audience where an off-canvas panel is more practical than a long top row.
• A section with promo pages where the menu should open on demand without taking over the hero area.

Cases Where You Should Not Rush In

Do not install the module just because "vertical menus look modern." If the site structure is poorly planned, a new module will simply present the chaos more elegantly. First, clean up the item tree, remove duplicates, verify parent-child relationships, and decide which levels should actually be visible. You should also avoid using off-canvas as the only way to reach critical sections without testing keyboard navigation, focus handling, mobile scrolling, and behavior when JavaScript is disabled or delayed.

How to Design the Menu Tree Before Configuring the Module

JUX Vertical Menu pulls its structure from Joomla, so the quality of the result begins before you ever open the extension settings. If the tree is built randomly, the module will faithfully display that randomness: long lists, uneven branches, unclear parent items, duplicates, and utility pages. Before configuring the module, it helps to do a quick navigation design pass: decide which sections truly belong together, which items are better left inside content, and which pages should stay out of the public menu entirely.

Start with the visitor's task. In a catalog, they are usually looking for a category, service type, or product group. In a knowledge base - a topic, chapter, or problem. In a corporate section - a business line, department, or document. If you build the menu around internal company structure, it may make sense to administrators but feel awkward to outside users. A vertical menu shows hierarchy well, but it does not fix a flawed grouping strategy.

Group Navigation by Meaning, Not by Item Count

Sometimes an administrator tries to make every branch the same length: five items per group, matching levels, similar labels. A real site does not need that. What matters more is whether users understand why those items belong together. If the "Support" section has two items and "Catalog" has fifteen, that is fine. Do not move pages around just to create visual symmetry.

With JUX Vertical Menu in particular, it is important not to split the top level into too many small pieces. Every first-level item becomes a major navigation anchor. If there are too many of them, visitors stop scanning the menu and start reading it as a long list. A good rule of thumb is to keep 5-9 top-level directions and push the details into the second level. If you have more than that, you may need a separate catalog, a filter system, or multiple local menus.

Decide What Parent Items Should Do

A parent item may have its own page, or it may serve only as a grouping label. Joomla supports both patterns: the item can lead to a section overview, or it can act as a heading for child links. In a vertical menu, that decision shapes user expectations. If the parent looks like a normal link, visitors will expect navigation. If it expands a submenu but does not lead anywhere, that should be obvious from its behavior and styling.

Do not make the parent a dead link without a reason. It is usually better to create a section overview page with a short explanation, links to major subsections, and some context. That way, users who click the parent do not hit a dead end. If the parent exists only as a group label, check how JUX Vertical Menu renders that item type and whether it causes confusion in off-canvas mode.

How Many Levels to Show

Official sources mention support for multiple levels, but the practical limit depends on item length and screen size. On desktop, a sidebar can usually handle 2-3 levels. On mobile, a third level often already requires scrolling and careful spacing. If your tree goes deeper, ask whether everything really needs to appear in the menu. Deep content can be connected through a section page, a "Next step" block, breadcrumbs, or internal links.

The right question is not "How many levels does the module support?" but "How many levels can a visitor use without getting frustrated?" For a reference site, that number may be higher. For a promo site, lower. For an online store, a deep hierarchy may be justified, but it works best alongside search, filters, and clear category naming.

Rough Draft Before Rebuilding It in Joomla

• List all items you want to show in the vertical menu.
• Mark the items that should always stay visible.
• Group child pages by visitor task, not by internal department.
• Remove duplicates and pages used only for technical routing.
• Check whether the purpose of each parent item is clear without opening its children.
• Mark separately which items would benefit from images or embedded module content.

Once you have that outline, the JUX Vertical Menu settings make much more sense. You already know which menu to choose, which levels to show, where one expanded branch is enough and where multiple branches are acceptable, which items need visual emphasis, and which pages should receive the module assignment.

What to Check Before Installation

Preparation does not start with uploading a ZIP file - it starts with reviewing your Joomla menu setup. The official Joomla documentation reminds us of the core mechanics: a menu does not appear on the public-facing site by itself; it is displayed by a module assigned to a template position and to specific pages. JUX Vertical Menu follows the same logic, so mistakes are usually tied not to the extension itself but to the source tree, position, page assignment, and access permissions.

Check the Menu Item Tree

Open the target menu in the Joomla admin panel and review the item order. Parent and child items should be arranged exactly as visitors are supposed to see them. If the tree includes hidden items, separators, restricted-access items, or elements disabled from display, make note of why they exist. Vertical menus are especially sensitive to messy nesting: a section placed under the wrong parent can end up on the second or third level and look as if it disappeared.

Minimum Structure Check

• Every child item has the correct parent assigned.
• The item order matches visitor logic, not the history of when pages were added.
• Utility items do not appear in the menu if they are needed only for routing.
• Restricted-access items have the correct groups configured, otherwise some visitors will see empty branches.
• Item labels are short enough for a sidebar but still clear.

Check Template Positions

For static mode, you need a real template position: a left column, right column, dedicated navigation area, or another region that the template actually renders on the relevant pages. If that position does not exist, you can create and configure the module, but visitors will never see it. In Joomla, template positions and module assignments work together: the position controls where the module appears on the page, and the assignment controls which pages it appears on.

Before installation, it is useful to enable template position preview or review your template documentation. Pay special attention to article, category, and store component pages: some templates show the sidebar on category listings but hide it on full articles or product pages. That is a common reason behind complaints like "the module appears on one page but disappears on another."

Check Compatibility Against Sources, Not Memory

JED and the JoomlaUX product page list JUX Vertical Menu as compatible with current Joomla branches, and the changelog notes Joomla 6 support plus fixes related to multiple modules on one page. At the same time, the documentation page includes an older system requirements block that looks like leftover text from earlier documentation. In practice, it is better to rely on the fresher product listings and JED entry, and treat the outdated requirements block as a cue to verify behavior on a test copy.

Practical rule: before installing on a production site, test the module on a copy that uses the same Joomla version, PHP version, template, and extension stack. A navigation module affects every page where it is published, so a real test matters more than confidence based on a single compatibility line.

Installing and Publishing the Module for the First Time

The official JoomlaUX documentation names the installation package pkg_jux_verticalmenu.zip and describes setup through the extension package upload section. In current Joomla versions, the overall flow is the same: install the ZIP package through the Extensions Manager, then find the created module in the list of site modules, choose the menu, position, and page assignments, and publish it. There is no need to modify Joomla core, template files, or the extension code.

If you are installing the package manually, make sure it is the actual install ZIP and not an archive that needs to be extracted before revealing another package inside. The JED extension installation documentation specifically points out that Joomla recognizes installation archives, not arbitrary bundles of files. If the installation fails, do not start extracting everything into the site root. First, check the package name, upload size, server limits, and the developer's instructions.

Basic Setup Order

1. Create a site backup or work on a staging copy.
2. Open the Joomla extension installation section and upload the pkg_jux_verticalmenu.zip package.
3. After installation, go to the list of site modules and find the JUX Vertical Menu module.
4. Open the module and choose the source Joomla menu in the Select Menu field.
5. Set the starting and ending levels if you only want to show part of the tree.
6. Choose the display mode: a regular module position or off-canvas if you want the slide-out version.
7. Assign the template position and the display pages on the menu assignment tab.
8. Save the module, open the site in a regular browser window, and check the result.

What to Check Immediately After Installation

Your first check should not stop at "the module appeared." Open several pages where the menu should be visible and several where it should not appear. Check the first level, child items, the current active item, panel width, behavior on mobile widths, and whether state is preserved after navigation. If the module does not appear, start with publication, position, and page assignment. If it does appear but shows the wrong items, go back to the menu selection field and level settings.

Do not mix installation troubleshooting with styling. First make sure a simple menu renders correctly, then change colors, typography, and animation. That saves time: if you change the position, levels, theme, width, and CSS all at once, it becomes much harder to tell which setting caused the issue.

A Map of the Module Settings: From Menu Selection to Panel Width

The most useful section in the JoomlaUX documentation is the module configuration block. It lists the settings that define the output logic: Select Menu, Start level, End Level, menu position selection, theme, Multi Expand Items, and Menu Max Width. These settings are best configured from top to bottom because each one depends on the choices above it.

Selecting the Source Menu

Select Menu determines which Joomla tree will be displayed. If the site has several menus - main, footer, hidden, catalog, account - choose the one that is actually intended for this panel. Do not use the main menu just because it already exists. For vertical navigation, it is often better to create a separate menu with a more focused structure, such as "Catalog," "Documentation," or "Service Sections."

A dedicated menu reduces the chance that header changes will accidentally affect sidebar navigation. At the same time, Joomla lets one menu feed multiple modules, so you can render the same tree in different locations with different levels and assignments. But if you use multiple JUX Vertical Menu instances on the same page, keep the changelog in mind: the developer has fixed configuration conflicts and Keep Canvas Open behavior when multiple modules are present. That is not a reason to avoid the setup entirely, but it is a reason to test it carefully.

Start Level and End Level

The starting and ending levels control output depth. If you are showing the full catalog, you can keep all relevant levels. If the module is meant to work as a local section menu, start from a specific level and cap the end level. Standard Joomla logic uses a similar approach for submenus: one module can show the first level, and another can show the active section's child items.

A common beginner mistake is enabling too many levels at once. Technically, multi-level support is there, but visitors struggle with a tree where every branch contains 4-5 expanding layers. For public navigation, it is usually better to show 2-3 meaningful levels and connect deeper pages through internal links, breadcrumbs, or content blocks.

Choosing the Position: Module Column or Off-Canvas

The menu position setting in JUX Vertical Menu helps determine whether the menu is tied to a normal module position or to off-canvas mode. For a static column, make sure the template position really exists and that the container width is appropriate. For off-canvas, the more important factors are the open trigger, slide-in side, content overlap, and scroll behavior.

If the menu is meant to provide persistent section navigation, choose a module position. If it is a supporting navigation layer that should free up space, choose off-canvas. For mobile-heavy audiences, off-canvas is almost always more convenient, but do not base the decision on screen width alone. In some cases, a desktop sidebar works best while mobile should use off-canvas. If the extension and template do not split that automatically, you can use two modules with different assignments and CSS classes, but that setup needs careful testing.

Multi Expand Items

Multi Expand Items controls whether an open branch closes when the user clicks another branch. If you allow multiple expanded branches, visitors can compare neighboring sections and see more of the structure at once. That works well for documentation, reference content, and catalogs with similar categories. If you disable it, the menu stays more compact: opening one branch closes the previous one.

The right choice depends on menu length. For a short menu with 2-3 branches, multiple expanded sections may be fine. For a long catalog, it is usually better to keep only one active branch open, otherwise the panel quickly turns into a long list. After changing the setting, always check whether expanded content pushes the open button or important items below the first screen.

Menu Max Width

Menu Max Width sets the maximum width of the panel. The documentation includes examples such as 300px or 100%. For a sidebar, it makes sense to start with the width your template can support - often somewhere around 260-340 pixels, although the exact number depends on the design. For off-canvas, you can allow more room if labels are long, but there is usually no need to cover nearly the entire screen on a tablet.

Result check: after changing the width, open long menu items, active states, the second level, and the mobile layout. If the text wraps to 3-4 lines, it is better to shorten item labels or widen the panel than to shrink the font until it becomes hard to read.

Static Mode and Off-Canvas: How to Choose the Right Behavior

The JUX Vertical Menu product page and documentation list Static Position and Offcanvas Position as separate options. These are not just visual variations. They solve different interaction problems. Static mode supports constant context: users can see where they are, which sections are nearby, and where they can go next. Off-canvas supports space efficiency: the menu stays out of the way while reading, but remains available when opened.

When to Choose Static Mode

Choose static mode when the menu is part of the section's actual content experience. For example, in documentation it shows the chapter structure on the left, in an online store it shows categories, and in a corporate section it lists services. Visitors can read the page and immediately understand what related material is nearby. At the same time, static mode depends more heavily on the template: you need an appropriate position, a usable column width, and clean behavior on mobile screens.

Do not test only the main section page. Open an internal article, a category page, a search result, a product page, or a component page if the menu is supposed to be available there. In Joomla, modules are often assigned by menu items, so a page without an explicit menu item can behave differently from what you expect.

When to Choose Off-Canvas

Off-canvas is a good fit for long menus that need to remain accessible without staying on screen all the time. It is useful on mobile devices, promo pages, layouts with a wide central content area, and cases where the template does not provide a convenient sidebar position. Official sources describe off-canvas as a hidden panel that slides in on request and helps keep the page visually clean.

Off-canvas brings its own risks. Users need to notice the open button. The panel should not cover important system elements. When it closes, it should be clear where focus returns. If the template already has a mobile menu, make sure you do not end up with two similar buttons. In those cases, it is often better to keep one primary mobile navigation mechanism and use JUX Vertical Menu only as local navigation inside specific sections.

How to Test Both Modes Without Creating Confusion

Create one test module and configure it as static first. Check the tree, levels, active items, width, and page assignments. Then clone the module or create a second instance for off-canvas, but assign it only to a test page. That lets you compare behavior without risking a situation where visitors suddenly see two menus at once.

If you need to keep both modes on the same site, separate them through assignments. For example, the static column can be used in the "Documentation" section, while off-canvas can be used in the "Catalog" section. Do not display two instances of the same menu on the same page without a clear reason. Even if the changelog includes fixes for multi-module conflicts, unnecessary duplication makes troubleshooting harder and can hurt usability.

Top Menu, Submenu, and Item Styles: What to Change First

The JoomlaUX documentation provides separate tabs for the top menu, submenu, and menu items. That is convenient, but it is also where it becomes easiest to lose sight of the goal. Styling should improve readability, make levels distinct, and fit the template. If you change everything at once, the menu can quickly become eye-catching but harder to use: the active item becomes unclear, the submenu blends into its parent, and hover states clash with the template colors.

Readability First, Decoration Second

Start with the base menu theme and check contrast. Text should be easy to read against the background, the active item should clearly differ from a normal one, and the child level should feel visually connected to its parent. If the menu includes icons or images, they should not replace text on critical items. An image can make a section easier to recognize, but navigation should remain understandable without it.

Spacing matters especially in a sidebar. If spacing is too tight, the menu feels dense and tense. If it is too loose, the menu becomes too tall and pushes lower items out of view. Look at your actual structure, not just a demo with short labels. If your menu items are long, test with those real labels.

Submenu Settings

The submenu should communicate hierarchy. Use indentation, a smaller size, or a calmer background, but do not make the second level feel more important than the first. If your tree has many levels, it is often better to keep 2-3 levels explicit and move deeper detail into content. In multi-level navigation, the goal is not to show everything - it is to help users avoid getting lost.

Safe CSS Tweaks Through a Module Class

Joomla lets you assign module classes and apply styles through the template file, for example with custom CSS. That is safer than editing extension files. If you need to separate the vertical menu from the content slightly, add your own class to the module and apply a small CSS tweak in the template.

.jux-side-nav {
  border-left: 3px solid #f28c28;
  padding-left: 14px;
}

.jux-side-nav .active > a {
  font-weight: 700;
}

The jux-side-nav class here is just an example: you need to add it in the module settings as a custom class if your template supports that output. After the change, check the active item, second level, and mobile view. If you do not like the effect, remove the class from the module or remove the CSS from the custom file. Do not edit JUX Vertical Menu files or Joomla core, or your changes may be lost during an update.

Menu Item Parameters, Images, and Modules Inside Submenus

One of the product-specific features of JUX Vertical Menu is its extended parameters for individual menu items. The documentation states that after installation, menu items get a Parameters (JUX Vertical Menu Extended) package. It also describes how to add an image through the Link Type tab using the link image parameter, and how to load a module into a menu item by choosing a module in the submenu parameters.

Images in Menu Items

An image next to a menu item is useful when it helps users recognize the section faster. In a catalog, for example, you might use small category icons; in a knowledge base, icons for content types; in a corporate menu, symbols for service areas. But the image should not carry the entire meaning by itself. Visitors should understand the item from the text, and the image should only reinforce it.

Use images sparingly. If every item includes a bright visual, the menu starts to feel like a banner grid and loses its navigation role. It is usually better to highlight a few key first-level sections or important groups, while leaving regular child items text-based.

Modules Inside Submenus

The documentation shows that you can choose a module for submenu content. That opens up useful scenarios: adding a short help block, a mini section banner, a catalog search form, a list of popular articles, or a contact block for a services section. But this is also where you need restraint. The menu should not turn into a full page.

A module inside a submenu should answer one short question: "What helps the user choose the next step?" If the submenu contains long text, a form with several fields, or a heavy widget, it will hurt both speed and accessibility. In mobile off-canvas mode, it is especially important to keep these extra blocks brief.

Examples of Good Module Content

• A short "Need help choosing?" block with a link to a consultation page.
• A mini list of popular sections inside a category.
• A compact documentation search block, if search already works correctly on the site.
• A concise informational banner with one link, as long as it does not interfere with the main menu items.

What Not to Put Inside a Submenu

Do not place complex forms, third-party widgets with heavy scripts, large galleries, videos, or blocks that require a lot of vertical space inside a submenu. A menu should support navigation, not compete with page content. If the block is important and substantial, place it in a separate template position or on the destination page instead.

Practical Example: A Sidebar Menu for a Catalog Section

Imagine a Joomla site with a service catalog section. The main menu is already in the top header, but inside the catalog you need to show areas such as "Development," "Support," "Integrations," "Audit," and "Training," with child pages under each one. The goal is to display a clean vertical navigation on the left side of catalog pages, keep the current section visible, and avoid showing this block on regular news pages.

Goal

Create a left column with a vertical menu that appears only in the catalog section. The menu should show the first and second levels, the current section should stand out clearly, and child items should expand without making the page feel overloaded. On mobile widths, you can replace the menu with an off-canvas version or keep it at the top of the section if the template rearranges the column correctly.

Preparation

First, create or review a dedicated "Catalog" menu. Add top-level items for each service area and child pages under each one. If some pages exist only for routing and should not appear in navigation, do not include them in this menu, or manage their display settings intentionally. Then verify that the catalog pages are tied to clear menu items, because those menu items will determine how the module is assigned to pages.

Configuration Steps

1. Install JUX Vertical Menu and open the created site module.
2. In the Select Menu field, choose the "Catalog" menu.
3. Set Start level to the first level and limit End Level to the second or third level if the structure is not too long.
4. Choose a static display through a module position, such as the template's left column.
5. Set Menu Max Width so that long labels wrap to no more than two lines.
6. Decide whether you need Multi Expand Items. For a service catalog, a single expanded branch is often easier to use.
7. On the menu assignment tab, select only the catalog pages and child pages where the module should be visible.
8. Save the module, open the frontend, and test several different sections.

Checking the Result

Open the main catalog page: the menu should appear in the left position, show the main directions, and leave the primary content unobstructed. Then open a child service page: the active parent and current item should be obvious. Open a news page or contact page: the menu should not appear there if it is intended only for the catalog. After that, reduce the browser width and see how the template rearranges the column.

A Detail People Often Miss

If the module disappears on a child page, the issue is often not JUX Vertical Menu itself but the module assignment or the absence of a related menu item. Joomla displays modules according to Menu Assignment and Access rules, so a page opened through a component without a clear menu item may not match the assignment you selected. In that case, check whether the page has a menu item, whether child items are included correctly in the assignment, and whether access is restricted.

Verifying the Result: Navigation, Mobile View, Speed, and Accessibility

After configuration, it is important to check not only the appearance but also the behavior. A navigation module shapes the user's path through the site, so problems are not always obvious at first glance. The menu may look great on the homepage but break on a long article, cover a button on mobile, show extra levels, or hide sections from logged-in users.

Frontend Review

Move through the main menu branches like a regular visitor. Do not rely only on the admin preview, because a logged-in user may see different items. Open the site in a new browser window while logged out, test clicks, expansion, active states, returning to the previous page, and behavior with long labels. If the menu includes images, make sure they do not stretch or ruin line height.

Mobile View

Check phone and tablet widths. For a static column, see where it moves: above the content, below the content, or whether it remains at the side. For off-canvas, test the open button, closing behavior, scrolling through a long menu, and reopening after navigation. If the template already includes its own mobile menu, make sure the user is not presented with two identical buttons.

Speed and Cache

The menu itself is usually not the heaviest part of the page, but extra images, submenu modules, and animations can still affect perceived speed. Joomla modules have caching settings, and the global cache can be cleared through the system area. After changing the menu structure, CSS, or module parameters, clear the cache and test the page again. If a problem disappears after clearing cache, treat that as part of your standard menu update process.

Accessibility and Keyboard Use

Official sources for JUX Vertical Menu confirm cross-browser support and responsiveness, but they do not provide a detailed WCAG-level statement about keyboard accessibility. That means you should test it yourself: can required items be opened from the keyboard, does focus get lost inside off-canvas mode, does the panel close in a predictable way, and is the active item contrast strong enough? If the site serves a broad audience, this check is not optional.

Bottom line: a menu is not truly finished just because it "looks good in the sidebar." It is finished when it shows the right items, works on the right pages, expands clearly, does not fight the template, and stays readable on mobile screens.

Common Problems and Troubleshooting

Most vertical menu issues are tied to the broader Joomla system: the module is not published, the wrong assignment target is selected, the template position is not rendered, child levels are hidden, cache is enabled, or another menu interferes with off-canvas behavior. Below is a practical symptom-based troubleshooting guide.

The Module Does Not Appear on the Page

Symptom: JUX Vertical Menu is installed and saved, but the menu is not visible on the frontend. A likely cause is that the module is unpublished, the selected position does not exist in the template on that page, or the menu assignment tab excludes the current item.

Check publication status, the template position, the selected menu, and the Menu Assignment rules. For a quick test, temporarily assign the module to all pages and choose a position you know exists. If the menu appears, restore the precise assignment step by step. If it still does not appear, review the extension installation, access permissions, and whether the position exists in the template.

The Wrong Items Show Up or Child Levels Are Missing

Symptom: the menu is visible, but the list does not match what you expected. Most often, the wrong source is selected in Select Menu, Start level and End Level are set incorrectly, child items are attached to a different parent, or access settings are hiding them.

Open the source menu in Joomla and compare the tree with the public result. If you only want to show child items of the active section, configure the levels intentionally. If you need the full catalog, do not cap End Level too early. After changes, clear the cache and test the page while logged out of the admin panel.

Off-Canvas Opens but Covers the Wrong Area or Conflicts with the Template

Symptom: the panel slides out, but it covers important elements, does not close the way users expect, appears alongside the template's mobile menu, or behaves differently across pages. The cause may be a conflict with the template's own off-canvas system, z-index layering, the open button, or multiple similar modules.

Start by disabling extra menu instances on a test page. Test one module in one mode. If the template has its own off-canvas menu, decide which mechanism will be primary. Do not leave two identical open buttons in place. If the problem is related to layering, use template settings or a careful CSS adjustment through a custom file, but do not modify the extension core.

Settings Do Not Change After Saving

Symptom: you changed a color, width, or level, but the site still shows the old version. A likely cause is Joomla cache, template cache, browser cache, or external CSS/JS optimization. Clear Joomla cache, refresh the page without browser cache, and check whether asset optimization is enabled in the template or a third-party extension.

If everything updates correctly after clearing cache, add cache clearing to your normal menu update routine. If nothing changes, make sure you are editing the actual module instance published on that page. On sites with multiple menus, it is easy to open a similar module and edit the wrong block.

The Menu Looks Fine on Desktop but Feels Awkward on Mobile

Symptom: items are too long, the panel takes over the whole screen, submenus are hard to scroll, or the open button is not obvious. Check the width, levels, and whether every branch really needs to be visible. For mobile, it is often better to limit depth, simplify labels, and remove extra modules inside submenus.

If a static sidebar becomes too long on mobile, consider off-canvas or a separate mobile instance with a shorter tree. But do not duplicate the menu without controlling assignments: two instances on the same page create confusion and may reproduce the kinds of multi-module conflicts the developer had to fix.

The Appearance Changed After Updating Joomla or the Template

Symptom: the menu used to work, but after an update the spacing, colors, width, or behavior changed. A likely cause is new template styles, a different CSS load order, updated JavaScript, or a mismatch in your custom tweaks.

Compare the page before and after on a staging copy. Check whether the extension files were edited directly. If you used custom CSS through a module class, temporarily disable it and inspect the base appearance. If the issue comes from a template conflict, solve it through custom CSS or template settings - not by changing JUX Vertical Menu files.

Safe Enhancements Without Editing Extension Files

A navigation module often makes people want to "tweak it just a bit": add spacing, highlight the active item, hide an extra block on mobile, or change the background. That is fine, but only through Joomla's safe layers: module settings, template custom CSS, module classes, and standard page assignment features. Do not edit extension files or inject arbitrary JavaScript if the job can be done with configuration.

A Module Class for a Dedicated Area

If the menu is used only in the catalog, give the module a unique class such as catalog-vertical-nav. That way, the styles affect only that zone. This is especially useful if the site has several JUX Vertical Menu instances: catalog, documentation, and account areas can each have their own spacing without touching the global theme.

Limit Visual Noise

Do not add images, colorful icons, and modules to every item. It is better to highlight 3-5 key sections and keep the rest calm. A menu should feel predictable. If visitors have to inspect every line as if it were a banner, navigation becomes slower.

Check After Every Enhancement

After any adjustment, test five points: the main section page, a child page, a page outside the section, the mobile view, and the page as a logged-out user. If everything works, the change is safe. If not, roll back the most recent CSS or setting. The best navigation enhancement is the one you can explain, verify, and undo quickly.

When JUX Vertical Menu Is the Right Choice

JUX Vertical Menu is worth using when the site has a real navigation problem to solve: showing many items in a sidebar, organizing a section with child pages, building a clean off-canvas panel, or adding images and modular content to selected items. The extension is especially useful where a standard top menu row can no longer handle the depth of the structure.

Before rolling it out, check the menu tree, template positions, page assignments, access rules, mobile behavior, and caching. After installation, first make sure a simple menu renders correctly, then move on to themes, width, multi-branch expansion, and images. That order helps you avoid the common situation where a visually polished menu hides a structural problem underneath.

If you need a compact way to display multi-level Joomla navigation and are prepared to test the result on a staging copy, you can download JUX Vertical Menu and work through the setup step by step using this guide. Make the final decision only after testing it with your own template, because the template, positions, and menu structure are what ultimately determine how well the extension will work on your specific site.