How To Add A Dropdown Navbar In Django

A dropdown navbar, in particular, helps organize navigation links efficiently, especially when you have multiple categories or sections. Over the years, I’ve developed a simple approach to adding a dropdown menu to a Django navbar that’s easy to implement and customize.

In this tutorial, I’ll walk you through how to create a dropdown navbar in Django with full code examples. Whether you’re developing a blog, an e-commerce site, or a portfolio, this guide will help you add a professional navigation experience for your users.

Let’s get started!

Table of Contents

What Is a Dropdown Navbar?

A dropdown navbar is a navigation bar that includes menu items that expand to reveal additional links when hovered over or clicked. This is especially useful for grouping related pages under one menu title, making your site easier to navigate.

Read Pyramid vs. Django

Method 1: Use Bootstrap with Django Templates

The easiest and most popular way to add a dropdown navbar in Django is by integrating Bootstrap, a widely used CSS framework that comes with prebuilt components, including responsive navbars and dropdown menus.

Step 1: Set Up Your Django Project and App

If you don’t have a Django project already, create one:

django-admin startproject myproject
cd myproject
python manage.py startapp main

Add your app to INSTALLED_APPS in settings.py:

INSTALLED_APPS = [
    # ...
    'main',
]

Step 2: Create Your Navbar Template

Create a folder named templates inside your app directory (main/templates/), and inside that, create a file called base.html. This will hold your navbar and base layout.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{% block title %}My Django Site{% endblock %}</title>
    <!-- Bootstrap CSS CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container-fluid">
            <a class="navbar-brand" href="{% url 'home' %}">MySite</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
                aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="{% url 'home' %}">Home</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                            aria-expanded="false">
                            Blog Categories
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="{% url 'category' 'python' %}">Python</a></li>
                            <li><a class="dropdown-item" href="{% url 'category' 'django' %}">Django</a></li>
                            <li><a class="dropdown-item" href="{% url 'category' 'data-science' %}">Data Science</a></li>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'about' %}">About</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        {% block content %}{% endblock %}
    </div>

    <!-- Bootstrap JS Bundle CDN (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Step 3: Define Your URL Patterns

In your app’s urls.py (main/urls.py), define the URLs referenced in the navbar:

from django.urls import path
from . import views

urlpatterns = [
    path('', views.home, name='home'),
    path('category/<str:category_name>/', views.category, name='category'),
    path('about/', views.about, name='about'),
]

Then include this in your project’s main urls.py:

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('main.urls')),
]

Step 4: Create Views

In main/views.py, create simple views to render templates:

from django.shortcuts import render

def home(request):
    return render(request, 'home.html')

def category(request, category_name):
    context = {'category_name': category_name}
    return render(request, 'category.html', context)

def about(request):
    return render(request, 'about.html')

Step 5: Create Content Templates

Create home.html, category.html, and about.html inside main/templates/ folder. Here’s an example for home.html:

{% extends 'base.html' %}

{% block title %}Home - My Django Site{% endblock %}

{% block content %}
<h1>Welcome to My Django Site!</h1>
<p>This is the homepage.</p>
{% endblock %}

Similarly, for category.html:

{% extends 'base.html' %}

{% block title %}{{ category_name|title }} Category{% endblock %}

{% block content %}
<h1>{{ category_name|title }} Articles</h1>
<p>Articles related to {{ category_name }} will be displayed here.</p>
{% endblock %}

And for about.html:

{% extends 'base.html' %}

{% block title %}About Us{% endblock %}

{% block content %}
<h1>About Us</h1>
<p>This is the about page.</p>
{% endblock %}

Step 6: Run Your Server

Make sure your templates are loading correctly, then run:

python manage.py runserver

Open http://127.0.0.1:8000/ in your browser. You should see a responsive navbar with a dropdown menu under Blog Categories.

I executed the above example code and added the screenshot below.

Check out Print Django Environment Variables

Method 2: Custom CSS and JavaScript for Dropdown Navbar

If you prefer not to use Bootstrap, you can create a dropdown navbar using custom CSS and JavaScript. This method gives you full control over styling but requires more setup.

Step 1: Create Your Base Template

Here’s a minimal example of a dropdown navbar without Bootstrap:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{% block title %}My Django Site{% endblock %}</title>
    <style>
        /* Navbar container */
        .navbar {
            background-color: #007bff;
            overflow: hidden;
            font-family: Arial, sans-serif;
        }

        /* Navbar links */
        .navbar a {
            float: left;
            color: white;
            padding: 14px 16px;
            text-decoration: none;
            display: block;
        }

        /* Dropdown container */
        .dropdown {
            float: left;
            overflow: hidden;
        }

        /* Dropdown button */
        .dropdown .dropbtn {
            cursor: pointer;
            border: none;
            outline: none;
            color: white;
            padding: 14px 16px;
            background-color: inherit;
            font-family: inherit;
            margin: 0;
        }

        /* Dropdown content (hidden by default) */
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: white;
            min-width: 160px;
            z-index: 1;
        }

        /* Links inside dropdown */
        .dropdown-content a {
            float: none;
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            text-align: left;
        }

        /* Show dropdown on hover */
        .dropdown:hover .dropdown-content {
            display: block;
        }

        /* Hover effects */
        .navbar a:hover, .dropdown:hover .dropbtn {
            background-color: #0056b3;
            color: white;
        }

        .dropdown-content a:hover {
            background-color: #ddd;
            color: black;
        }
    </style>
</head>
<body>
    <div class="navbar">
        <a href="{% url 'home' %}">Home</a>
        <div class="dropdown">
            <button class="dropbtn">Blog Categories</button>
            <div class="dropdown-content">
                <a href="{% url 'category' 'python' %}">Python</a>
                <a href="{% url 'category' 'django' %}">Django</a>
                <a href="{% url 'category' 'data-science' %}">Data Science</a>
            </div>
        </div>
        <a href="{% url 'about' %}">About</a>
    </div>

    <div class="container" style="padding: 20px;">
        {% block content %}{% endblock %}
    </div>
</body>
</html>

Step 2: Use the Same Views and URLs

You can use the same views and URL patterns from Method 1. This method just changes the frontend presentation.

I executed the above example code and added the screenshot below.

Read Google Authentication in Django

Tips from My Experience

When using Bootstrap, always use the latest stable version CDN for better performance and security.
Keep your dropdown items relevant and not too long to avoid overwhelming users.
For SEO and accessibility, ensure your links have meaningful text and use semantic HTML.
Test your navbar on different screen sizes for responsiveness.
If your site grows, consider dynamically generating dropdown items from your database for easier maintenance.

Adding a dropdown navbar in Django is easy once you know the right approach. Whether you use Bootstrap for quick setup or custom CSS for full control, the key is providing users with easy navigation.

51 PYTHON PROGRAMS PDF FREE

Aspiring to be a Python developer?

Let’s be friends