django-mptt and bootstrap to create dropdowns

Viewed 98

I'm having trouble getting my subcategories to appear in the dropdown using mptt. If I follow the documentation and do something like this:

{% load mptt_tags %}
<ul>
    {% recursetree categories %}
        <li>
            {{ node.name }}
            {% if not node.is_leaf_node %}
                <ul class="children">
                    {{ children }}
                </ul>
            {% endif %}
        </li>
    {% endrecursetree %}
</ul>

It works. I have 1 category with 2 subcategories and it appears at top of navbar like:

Hoodies
   Pullovers
   Zippers

But when I try to add it to a navbar like this:

         {% load mptt_tags %}
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-3">
            <div class="container-fluid">
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                        {% recursetree categories %}
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="{{ node.get_absolute_url }}" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                {{ node.name }}
                            </a>
                            {% if not node.is_leaf_node %}
                            <ul class="children dropdown-menu" aria-labelledby="navbarDropdown">
                                <li><a class="dropdown-item" href="#" style="color:red;">{{ children }}</a></li>
                            </ul>
                            {% endif %}
                        </li>
                        {% endrecursetree %}
                    </ul>


                    <form class="d-flex" role="search" action="/s/">
                        <input class="form-control me-2" type="search" name="q" placeholder="Search" aria-label="Search">
                        <button class="btn btn-outline-success" type="submit">Search</button>
                    </form>
                </div>
            </div>
        </nav>

the subcategories don't show up. When I inspected the html on the browser, it's not showing any children in the dropdown.

It's highlighting something that is clickable and I get 2 of them (subcategories), but the names (pullovers, zippers) aren't showing.

Anyone see what I might be doing wrong here? Thanks

0 Answers
Related