How to Keep Dropdown Menu Expanded When on Submenu Page?

Ask the community
, ,
1

Hi everyone,

I’m trying to keep a dropdown menu expanded when a user is on one of its submenu pages, but I’m having trouble getting it to work.

My Setup:

  1. I have a menu element with ID: scalingCapabilitiesMenu
  2. This menu has dropdown/submenu items
  3. When users navigate to one of the submenu pages, I want the parent menu to remain expanded to show which submenu item is active

What I’ve Tried:

  1. Using .expand() method on the menu element - but this doesn’t work for expanding the dropdown/submenu items, only for collapsible menus

  2. Checking if menu items are selected:

$w.onReady(function () {
    const menu = $w('#scalingCapabilitiesMenu');
    const hasSelectedItem = menu.menuItems.some(item => item.selected);
    
    if (hasSelectedItem) {
        menu.expand(); // This doesn't work for dropdown submenus
    }
});
  1. Looking for menu settings in the Editor (Layout, Display options) but couldn’t find an option to “Keep submenu open when on submenu page”

My Question: How can I programmatically keep a dropdown/submenu visible when the current page is one of its submenu items?

Is there a method or property I’m missing? Or is this something that needs to be configured in the menu settings rather than code?

Any help would be greatly appreciated!

Thanks in advance!

2

Is this a horizontal or vertical menu?

If it’s vertical, this makes sense, and you can change the Dropdown to “Always open” - although if you have multiple dropdowns, they will all be open

Screenshot 2025-11-24 at 16.03.54
Screenshot 2025-11-24 at 16.03.54645×293 14.8 KB

3

Thank you for your response.

Yes, it’s a vertical menu. However, I don’t want to keep it always open, as this would create confusion for users particularly in distinguishing between parent and child menu items. This is especially important since I’m building a documentation website with an extensive menu structure.

I have a few additional concerns about the current menu functionality:

  1. Expand/Collapse Behavior: I need the menu to automatically expand only when a user is on one of its submenu pages, not remain permanently open.

  2. Styling Limitations: The menu doesn’t support custom CSS, and the padding options in the menu settings are quite limited, there’s no way to set different padding values for left and right sides independently. Ideally, submenus should align with the parent menu on the right side while having additional left padding to create a clear visual hierarchy.

  3. Text Wrapping Issue: The main menu items don’t support text wrapping, which causes part of the label to be hidden when the menu label is slightly long. This is a critical usability problem for documentation menus where descriptive labels are necessary.

  4. Visual Hierarchy: The current arrow icon direction doesn’t clearly indicate the menu structure, making it difficult for users to understand the relationship between parent and child items.

For reference, the Wix API documentation menu demonstrates the exact behavior and visual structure I’m trying to achieve. Their vertical menu clearly shows hierarchy, proper alignment, and intuitive expand/collapse functionality.

Is there a way to replicate this behavior in my Wix site?

Thanks again for your help!

4

As far as I’m aware, there’s not a property that expands/collapses.

I know when I’ve approached these styles of projects, I’ve gone down the route of creating a Wix Block, with repeater in repeater - which has worked pretty well