nav multilever with Bootstrap 5

[Sennik]

I really love the approach of which recursion is handled in Statamic V3. But when using Bootstrap 5 it is not working because it is not possible to style the recursion part (ul's, li's and a's) with the needed bootstrap (and custom) classes.

   <ul class="navbar-nav mr-auto mb-2 mb-lg-0">
      {{ nav:collection:pages }}
         <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" data-bs-auto-close="outside">{{ title }}</a>
               {{ if children }}
                  <ul class="dropdown-menu">{{ *recursive children* }}</ul>
               {{ /if }}
          </li>
       {{ /nav:collection:pages }}
   </ul>

Shouldn't this be customizable? Maybe with a template in a config file?

All this wouldn't be a problem if nesting of {{ children }} tags works like expected. Then we can handle recursion ourselves.

[jasonvarga]

You can also just not use recursion. Just loop over children.

<ul>
{{ nav }}
  <li>
    <a href="{{ url }}">{{ title }}</a>
    {{ if children }}
    <ul class="children">
      {{ children }}
        <li>
          <a href="{{ url }}">{{ title }}</a>
          {{ if children }}
            <ul class="different-again">
              and so on
            </ul>
          {{ /if }}
      {{ /children }}
    </ul>
    {{ /if }}
   </li>
{{ /nav }}
</ul>