Search⌘ K
AI Features
Home
Courses
Django Takeoff: Developing Modern Applications

Homepage with Navbar

Explore how to create a reusable navbar in Django by setting up a base template with common navigation links and extending it in child templates. Understand the use of block and extends tags to maintain consistent page layouts and improve user navigation across the website.

We'll cover the following...

In this chapter, we will focus on adding a navbar with links to the other pages. This means we’ll no longer have to keep typing out the URL for the pages.

The first step in adding a navbar is to create a file called base.html in the templates folder which will serve as our parent template. This means that we’ll pass this template to other pages since it has common elements for all pages such as a navbar.

When we style the website, we will include a fully functional navbar. For now, let’s just display the links for the other pages at the top, so that users can navigate the website easily.

Add navbar

Go to listings/templates/listings/ directory, open base.html and add the following code.

HTML
<nav class = "navbar">
    <a href="{% url 'listings:index' %}">BIKE FINDER</a> -
    <a href="{% url 'listings:all_listings' %}">LISTINGS</a> -
    <a href="{% url 'listings:new_listing' %}">NEW LISTING</a>
</nav>
{%block content%}
{%endblock content%}

In line 1, we have added the <nav> tags for the navigation bar.

In lines 2–4, the <a> tags are used to define the hyperlinks for the different pages of the website.

The block tags in lines 7–9 are tags that can be filled in by child templates. In this example, we use {%block content%} and {%endblock content%} with content being the name of the block. The content that goes inside these tags will be filled in by what we define in the other pages.

Block tags

Let’s see an example of how to use the block tags in the listings/templates/listings/index.html template by adding the following code.

HTML
{% extends "listings/base.html" %}
{%block content%}
<h3>Bike Find3r</h3>
<p>This is a homepage</p>
{%endblock content%}

On line 1, the extends tag tells Django which parent template the child template is inherited from. In this case, the child template index.html inherits from the parent template base.html.

The extends tag takes the navbar and an empty pair of content block tags from the parent template (base.html). The same content block tags are present in the child template. These tags wrap the information that we want to display, so now the empty tags in our parent template will contain the information from the child template content block tags.

Every page displays different information, so we have to wrap the information in the child template with the content block tags and add the extends tag in order to have a navbar in all the pages.

Live demo of Homepage with navbar

  1. You can see base.html opened in the following widget. Add the code for the navbar from the first code snippet of this lesson.
  2. Open index.html in the directory listings/templates/listings/ and add the code for the block tags from the second code snippet in this lesson.
  3. Run the app.
"""
ASGI config for example project.

It exposes the ASGI callable as a module-level variable named ``application``.

For more information on this file, see
https://docs.djangoproject.com/en/3.0/howto/deployment/asgi/
"""

import os

from django.core.asgi import get_asgi_application

os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'example.settings')

application = get_asgi_application()
Live demo of Homepage with navbar