Bootstrap 4 and MENU helper problem

[Annet]

In Bootstrap 4 the MENU helper no longer generates the Bootstrap navbar

{{=MENU(response.menu, _class='nav navbar-nav', ul_class='dropdown-menu', li_class='dropdown')}}

This worked in Bootstrap 3, in Bootstrap 4 it no longer works this is what web2py generates:

<ul class="nav navbar-nav">

    <li class="web2py-menu-first"><a></a></li>

    <li class="dropdown" data-w2pmenulevel></li>

        <a class="dropdown-toggle"></a>

        <ul class="dropdown-menu">

            <li></li>

        </ul>

    </li>

</ul>

In Bootstrap 4 to work correctly web2py should generate this:

<ul class="navbar-nav">

    <li class="nav-item web2py-menu-first"><a class="nav-link"></a></li>

    <li class="nav-item dropdown" data-w2pmenulevel></li>

        <a class="nav-link dropdown-toggle"></a>

        <div class="dropdown-menu">

            <a class="dropdown-item"></a>

        </div>

    </li>

</ul>

Is there a way to generate a Bootstrap 4 navbar in web2py 2.19.1 or is there a way to set the

right arguments in this line of code:

{{=MENU(response.menu, _class='nav navbar-nav', ul_class='dropdown-menu', li_class='dropdown')}}

Kind regards,

Annet

[Annet]

I got a bit further solving this issue adjusting web2py-bootstrap4.js

$(function() {
    $(".navbar-nav ul.dropdown-menu").each(function() {
      var toggle = jQuery(this).parent();
      if (toggle.parent().hasClass("navbar-nav")) {
        toggle.attr("data-w2pmenulevel", "l0")
        toggle.addClass("nav-item dropdown");
        toggle.children("a")
          .addClass("nav-link dropdown-toggle")
          .append('<span class="caret"> </span>')
          .attr("data-toggle", "dropdown");
        var element = jQuery(this).children();
        element.addClass("dropdown-item")
      } else {
        toggle.addClass("dropdown-submenu").removeClass("dropdown");
      };
    });
  });

These adjustments render the following menu:

<ul class="navbar-nav">

    <li class="nav-item web2py-menu-first"><a class="nav-link"></a></li>

    <li class="dropdown nav-item" data-w2pmenulevel></li>

        <a class="nav-link dropdown-toggle"></a>

        <div class="dropdown-menu">

            <a class="dropdown-item"></a>

        </div>

    </li>

</ul>

The issue left is the bit in red, I haven't been able to figure out how to add the

class to the A element.

Furthermore I don't understand why web2py reverses the order of the bit in orange,

no matter the order in which I write the code, I always get class="dropdown nav-item"

instead of class="nav-item dropdown"

I hope anyone can help me solve the last bit of this problem.

Kind regards,

Annet

[Val K]

Hi, Annet!
1. You can write your own MENU helper based on gluon.html.MENU - it's easy
2. about reorder classes - its because web2py uses unordered set in add_class/remove_class - it could be fixed - open an issue, please

[Annet]

Hi Val,

Thanks for your reply.

I'll do as you suggest.

Kind regards,

Annet