Dynamic Navbar

Using Django Templates & Frontend
1

I have create a Category and Sub category Model for navbar and navbar dropdown, but not showing data in navbar while include in home page template…

Model.py
class Categories(models.Model):
categories_name=models.CharField(max_length=100)
def str(self):
return self.categories_name

class SubCategories(models.Model):
subCategories_name=models.CharField(max_length=100)
categories=models.ForeignKey(Categories,on_delete=models.SET_NULL,null=True,related_name=‘subcategories’)
def str(self):
return self.subCategories_name

view.py
def Menu(request):
categories = Categories.objects.all()
subcategories = SubCategories.objects.all()
context = {
‘categories’: categories,
‘subcategories’: subcategories

}
return render(request, 'navbar.html', context)

navbar.html

Navbars 
  <ul class="navbar-nav me-auto mb-2 mb-lg-0">


      {% for cat in categories %}
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
        {{ cat.categories_name }}
      </a>


      <ul class="dropdown-menu" aria-labelledby="navbarDropdown">


      {% for subcat in subcategories %}

           {% if cat.id == subcat.categories_id %}
        <li><a class="dropdown-item" href="{{subcat.id }}">{{ subcat.subCategories_name }}</a></li>
          {% endif %}

{% endfor %}

    </li>
      {% endfor %}

  </ul>

<form class="d-flex" role="search" action="{% url 'search' %}" method="get">
    {% csrf_token %}
    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" name="query">
    <button class="btn btn-outline-success" type="submit">Search</button>
  </form>

</div>

homepage html
{% extends ‘layouts.html’ %}
{% block title %}
Homepage
{% include “blogsite/navbar.html” %}
{% endblock %}

{% block main_content %}

{% endblock %}

final output

Screenshot (63)
Screenshot (63)1366×768 61.2 KB

2

Note: When posting code or templates here, surround the code (or template) between lines of three backtick - ` characters. This means you’ll have a a line of ```, then your code, then another line of ```.

Probably the first thing you want to do here is to look at the rendered html in your browser’s developer tools to see what has been rendered. Examine the html directly. There always the chance that the entries have been rendered but are not visible due to some css effect.

Side note: You don’t want to do this:

You’ll want to iterate directly over the subcategories related to the current category.
e.g. {% for subcat in cat.subcategories.all %}
This also means that you don’t need the extra query for subcategories in your view or that extra queryset for subcategories in the context.