Add Support for Level 2 Menu Items in Bootstrap 5

i have a suggestion we can modify menu--main.html.twig

and i have an example

<div class="menu-wrapper">
  <ul data-block="header" class="main-menu">
    {% for item in items %}
      <li class="main-menu-level-0">
        {% if item.url %}
          {% if item.url.isRouted() and item.url.getRouteName() != '<nolink>' %}
            <a href="{{ item.url }}" {{ item.attributes.addClass(["main-level-0", "item"]) }}>{{ item.title }}</a>
          {% else %}
            <div class="mobile-main-menu-icon-back">
              <i class="lni lni-arrow-left"></i>
            </div>
             <span {{ item.attributes.addClass(["main-level-0", "item"]) }}>{{ item.title }}</span>
            <div class="mobile-main-menu-icon">
              <i class="lni lni-chevron-right"></i>
            </div>
          {% endif %}
        {% else %}
           <span {{ item.attributes.addClass(["main-level-0", "item"]) }}>{{ item.title }}</span>
        {% endif %}
        {% if item.below %}
          <div class="main-menu-level-1-wrapper">
            <ul class="main-menu-level-1">
              {% for subItem in item.below %}
                <li class="main-level-1">
                  {% if subItem.url %}
                    {% if subItem.url.isRouted() and subItem.url.getRouteName() != '<nolink>' %}
                      <div class="main-menu-links">
                        <a href="{{ subItem.url }}" {{ subItem.attributes.addClass(["main-level-1", "main-menu-links__item"]) }}>{{ subItem.title }}</a>
                      </div>
                    {% else %}
                      <span {{ subItem.attributes.addClass(["main-level-1", "item"]) }}>{{ subItem.title }}</span>
                    {% endif %}
                  {% else %}
                    <span {{ subItem.attributes.addClass(["main-level-1", "item"]) }}>{{ subItem.title }}</span>
                  {% endif %}
                  {% if subItem.below %}
                    <ul class="main-menu-level-2">
                      {% for subSubItem in subItem.below %}
                        <li class="main-level-2">
                          {% if subSubItem.url %}
                            {% if subSubItem.url.isRouted() and subSubItem.url.getRouteName() != '<nolink>' %}
                              <div class="main-menu-links">
                                <a href="{{ subSubItem.url }}" {{ subItem.attributes.addClass(["main-level-2", "main-menu-links__item"]) }}>{{ subSubItem.title }}</a>
                              </div>
                            {% else %}
                              <span {{ subItem.attributes.addClass(["main-level-2", "item"]) }}>{{ subSubItem.title }}</span>
                            {% endif %}
                          {% else %}
                            <span {{ subItem.attributes.addClass(["main-level-2", "item"]) }}>{{ subSubItem.title }}</span>
                          {% endif %}
                        </li>
                      {% endfor %}
                    </ul>
                  {% endif %}
                </li>
              {% endfor %}
            </ul>
          </div>
        {% endif %}
      </li>
    {% endfor %}
  </ul>
</div>

change class name to bootstrap name.
so this twig file addresses 2 problems it url has so it will put it in span and if it has a link so it will put it in a tag. doing so it wont brake the site.

Nesting is considered bad practice in Bootstrap 5

Nesting is considered bad practice in Bootstrap 5. It is bad for UX, mobile usage and accessibility. Read more:

• https://github.com/twbs/bootstrap/issues/27659
• https://github.com/twbs/bootstrap/issues/16387#issuecomment-97153831

Hence, there are no examples in the current documentation: https://getbootstrap.com/docs/5.1/components/dropdowns/#menu-items

README.md

See FAQ section to get you started on overriding the template: https://git.drupalcode.org/project/bootstrap5/-/blob/1.1.x/README.md#faq...

Alternatives

Other modules implementing megamenu: https://www.drupal.org/project/we_megamenu →