Sidenav no worky servoy 2026.06

Questions
1

Subject: Issue with servoyextra-sidenav: works as “solution” but not as “solutions” (module)

Hi Servoy technical team,

I’m experiencing a consistent issue with the servoyextra-sidenav component when my solution is run as a module inside another solution.

Context

  • Servoy version: [specify version]

  • Servoy Extra Components version: [specify version]

  • Root solution (started as solutions): [RootSolutionName]

  • Module solution (where the sidenav is): [ModuleSolutionName]

  • Component: servoyextra-sidenav (Servoy Extra Components)

  • navigationMode used: COLLAPSE-MENU / COLLAPSE-MENU-NOHOVER (there is no TREE option in my version)

Symptom

  • If I start my navigation solution as solution (singular), the sidenav works correctly:

    • The root menu is displayed.

    • Clicking on a parent item correctly shows the child items.

  • If I start the root solution with solutions (plural), using my navigation solution as a module:

    • The root menu is displayed (first-level items appear fine).

    • Clicking on a parent item never shows the children:

      • No <ul class="svy-sidenav-menu sn-level-2"> appears in the DOM.

      • However, the Angular model does contain the child menuItems.

Minimal reproducible code

In the navigation form of the module, in initNavigationForm():

javascript

Collapse

Copy

function initNavigationForm() {
    var menuItems = [
        {
            id: 'padre',
            text: 'Padre',
            iconStyleClass: 'fa fa-folder',
            menuItems: [
                { id: 'hijo1', text: 'Hijo 1', formname: 'Bancos_Grid', enabled: true },
                { id: 'hijo2', text: 'Hijo 2', formname: 'Balance',     enabled: true }
            ]
        }
    ];

    elements.sidenav.setRootMenuItems(menuItems);
}

Selection handlers (also tested with empty handlers; the issue persists):

javascript

Collapse

Copy

function onMenuItemSelectedHandler(menuItemId, event) {
    return onMenuItemSelected(menuItemId, event);
}

function onMenuItemSelected(menuItemId, event) {
    var item = elements.sidenav.getMenuItem(menuItemId);

    // If it has children
    if (item && item.menuItems && item.menuItems.length > 0) {
        // I also tried just returning true/false without doing anything
        return false;
    }

    return true;
}

DOM behavior (as module)

Inspecting in the browser (NGClient) when the solution runs as solutions:

html

Collapse

Copy

<div class="svy-extra-sidenav has-panel" ...>
  <div class="svy-sidenav ... nav-collapse-menu nav-fixed-toggle" style="width: 300px;">
    <nav class="svy-sidenav-content">
      <ul class="svy-sidenav-menu sn-level-1 svy-sidenav-collapsed">
        <li class="svy-sidenav-dropdown sn-level-1">...</li>
        ...
      </ul>
    </nav>
  </div>
  ...
</div>

  • There is only the <ul class="svy-sidenav-menu sn-level-1 ...">.

  • Even when I click the caret icon (ng-click="toggleExpandedItem(...)"), the second level is never rendered:

    • No <ul class="svy-sidenav-menu sn-level-2 ..."> appears.

Angular model (as module)

In the browser console:

js

Collapse

Copy

var el = document.querySelector('nav.svy-sidenav-content');
angular.element(el).scope().model.menu

Returns (for the minimal example):

js

Collapse

Copy

[
  {
    id: "padre",
    text: "Padre",
    iconStyleClass: "fa fa-folder",
    menuItems: [
      { id: "hijo1", text: "Hijo 1", formname: "Bancos_Grid", enabled: true, ... },
      { id: "hijo2", text: "Hijo 2", formname: "Balance",     enabled: true, ... }
    ],
    ...
  }
]

So:

  • The Angular model does contain correct menuItems for the parent.

  • The event onMenuItemExpanded(menuItem, event) is also fired (I verified with application.output()).

  • But the sidenav’s Angular template never renders the level-2 <ul> when running as a module.

Compared behavior

  • Same solution, same form, same code, same menu:

    • As solution: the sidenav opens and shows children correctly.

    • As solutions (module inside [RootSolutionName]): the second level is never rendered, even though the Angular model has the menuItems.

Question

Could you please check if there is any known issue with servoyextra-sidenav (in COLLAPSE-MENU or SLIDE-MENU modes) when used from a solution as a module inside another solution, which would prevent secondary levels from rendering even though model.menu[i].menuItems is correctly filled?

In particular, I’d appreciate guidance on whether there might be:

  • a version conflict between:

    • the root solution and the module (svyNavigation / servoyextra),

  • or if there is any specific setup required in:

    • the navigation template,

    • the navigationMode,

    • or the sidenav configuration in the solutions (module) context,

so that Angular will actually render the <ul class="svy-sidenav-menu sn-level-2"> correctly.

I can provide a sample solution with:

  • the root solution,

  • the module containing the navigation form and the “Padre / Hijo 1 / Hijo 2” menu,

if needed to reproduce.

Thank you very much.

2

i don’t really get this post
why are you talking about “solution” and “solutions” that sounds to me like that you compare NG1 against TiNG (so the url in the browser has “solutions” (ng1) or “solution” (ting) in the url)

then you also talk about 26.06 which is a the master nightly build .. (not a released version of any kind)

And then you talk about having it as a module but that doesn’t make much sens what is a module of a solution having todo with “solutions” or “solution” difference

But if it runs under “solution” and you talk about the url in the browser then this is a no issue, because “solutions” is then ng1 which is not supported anymore in 2026.x release, (but it is just there in the developer to compare against, can be removed fully somewhere in the coming time)