Template updates for bootstrap 5 dropdown toggle

This setting is already in place in 5.5.2, but the drop-down menu functionality is still broken. Is there an additional fix that needs to be applied?

The default Bootstrap 5 version (5.0.0-beta1) is looking for the data-bs-target attribute on all the links to know which submenu to toggle, but it's not set. I changed my subtheme to use 5.0.2 and it works fine now.

Edit line 58 of menu--main.html.twig in the bootstrap barrio theme's templates/navigation folder, and change "data-toggle" to "data-bs-toggle".

I did the opposite... I changed "data-bs-toggle" to "data-toggle" and that fixed the issue. Why did this fix the problem?

I was having the same issue and went through and made the proper HTML/CSS changes, however it was still broken. I then noticed that the theme was loading both CDN javascript libraries. The bundle and un-bundle versions. I commented out the un-bundled version and everything started working.

bootstrap_cdn:
  js:
    #//cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js: { type: external, minified: true }
    //cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js: { type: external, minified: true }
  css:
    component:
      //cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css: { type: external, minified: true }

For bootstrap 5.0 the attribute is data-bs-toggle, according to Bootstrap Docs.

This still only works for me when I change data-bs-toggle to "data-toggle". Why is this happening?

spent hours messing around with this without success.... quick dirty workaround without changing data attributes. add it to your own subtheme just in case this is not fixed in subsequent releases.

(function ($, Drupal) {
  'use strict';

  Drupal.behaviors.bootstrap_barrio_subtheme = {
    attach: function (context, settings) {
      $(".navbar-toggler-icon").click(function() {
        $(this).toggleClass("open");
        if ($(this).hasClass("open"))
          $(".navbar-collapse").show();
        else
          $(".navbar-collapse").hide();
      })
    }
  };

})(jQuery, Drupal);

Barrio is great and I very much appreciate this theme but his has been an issue for us for the past 6 months since starting with Drupal 9 and Barrio for #block-mainnavigation.

The update to 5.5 again broke the small screen main nav dropdown menu. It has the same issue as before, small screen main menu drops down but won't collapse. We fixed by setting Barrio (base theme) to use no library, and Barrio Subtheme to load local library. Then changed subtheme.libraries.yml to reference a local bootstrap as shown below.

global-styling:
  version: VERSION
  js:
    js/global.js: {}
  css:
    component:
      css/style.css: {}
      css/colors.css: {}
bootstrap:
  js:
    /core/assets/vendor/popperjs/popper.min.js: {}
    /themes/contrib/bnd9/libraries/twbs/bootstrap/dist/js/bootstrap.min.js: {}
  css:
    component:
      /themes/contrib/bnd9/libraries/twbs/bootstrap/dist/css/bootstrap.css: { weight: -48 }
bootstrap_cdn:
  js:
    //cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js: {}
  css:
    component:
      //cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css: {}
color.preview:
  version: VERSION
  css:
    theme:
      color/preview.css: {}
  js:
    color/preview.js: {}
  dependencies:
    - color/drupal.color

Okay, things worked fine here with the main nav opening and collapsing.

---

After a few composer updates recently, we are now Barrio 5.5 and the issue reappears. Nav bar opens but not closes on small screens. How can this be? I thought this was fixed by not depending on external library, ah!

---

Now we changed setting to load local library for Barrio (base theme) as well as keeping the setting to load local library on Barrio Subtheme. Then commented out boostrap_cdn references in subtheme.libraries.yml as shown below.

global-styling:
  version: VERSION
  js:
    js/global.js: {}
  css:
    component:
      css/style.css: {}
      css/colors.css: {}
bootstrap:
  js:
    /core/assets/vendor/popperjs/popper.min.js: {}
    /themes/contrib/bnd9/libraries/twbs/bootstrap/dist/js/bootstrap.min.js: {}
  css:
    component:
      /themes/contrib/bnd9/libraries/twbs/bootstrap/dist/css/bootstrap.css: { weight: -48 }
bootstrap_cdn:
  js:
    #//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js: {}
  css:
    component:
      #//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css: {}
color.preview:
  version: VERSION
  css:
    theme:
      color/preview.css: {}
  js:
    color/preview.js: {}
  dependencies:
    - color/drupal.color

All seems to be working normally again now. data-bs-toggle data-bs-target weren't changed

Commenting out causes "AssertionError: CSS files should be specified as key/value pairs, where the values are configuration options." on D9.3.4 and php8.1 so removed

bootstrap_cdn:
  js:
    #//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js: {}
  css:
    component:
      #//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css: {}

I still am having this issue with 5.5.14.

I added a main menu item and added dropdown links to it. Hovering on the parent menu item shows the link but attempting to click on it does nothing. The child menu links are working.