Bootstrap navbar

[vitalijalbu]

Hi all, anyone can provide a 100% navigation with bootstrap v5? Thanks. I tried this code but seems have some issues on dropdowns:

{{ craft.navigation.render('navHandle', {
    ulClass: 'navbar-nav me-auto',
    liClass: 'nav-item',
    aClass: 'nav-link',
    activeClass: 'active',
    hasChildrenClass: 'dropdown',
    ulAttributes: {
        'data-attr': 'Some value',
    },
    liAttributes: {
        'data-attr': 'Some value',
    },
    aAttributes: {
        'data-attr': 'Some value',
    },
}) }}

[engram-design]

The render() function won't support this, as Bootstrap's templating would be complex. In particular, we need to change the markup for a normal node:

<li class="nav-item">
    <a class="nav-link" href="#">Home</a>
</li>

To a dropdown-ready one:

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown
    </a>

You're much better off custom-rendering your navigation.