Building a Navbar using LLM + Jinja

Prompt + LLM Result: https://claude.ai/share/d302cd2b-8670-4953-80ee-d3d6be4babdb

In the previous tutorial we refactored the code into a base.html file. What about the common components, e.g. the navbar. 

The {% include %} tag in Jinja2 is like copy-pasting, but automated and smart. When Jinja2 encounters this tag, it literally takes the content of the specified file and places it right where the include tag is written. Think of it as a placeholder that gets replaced by actual HTML content.

Setting Up Our Navbar Component

Looking at our current folder structure from the previous posts, we already have a components/ directory inside our templates/ folder. If you don't have it, create it now:

└── 📁 templates
   ├── 📄 base.html
   ├── 📁 blog
   |  └── 📄 list.html
   └── 📁 components
      └── 📄 navbar.html

First of all let us utilize LLMs to generate a Navbar. As long as the Prompt is detailed, We can get near repeatable results. Here is my prompt to get a simple navbar: https://claude.ai/share/d302cd2b-8670-4953-80ee-d3d6be4babdb

Now, let's create our beautiful navbar. Open up templates/components/navbar.html and add the following code. 

<nav class="bg-white shadow-md border-b border-gray-200">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between items-center h-16">
        <!-- Left side - Blogs link -->
        <div class="flex items-center">
          <a href="/blogs" class="text-emerald-500 hover:text-emerald-600 font-medium text-lg transition duration-200">
            Blogs
          </a>
        </div>
        
        <!-- Right side - Signup and Login buttons -->
        <div class="flex items-center space-x-4">
          <a href="/signup" class="bg-emerald-500 hover:bg-emerald-600 text-white px-4 py-2 rounded-md font-medium transition duration-200">
            Signup
          </a>
          <a href="/login" class="text-emerald-500 hover:text-emerald-600 border border-emerald-500 hover:border-emerald-600 px-4 py-2 rounded-md font-medium transition duration-200">
            Login
          </a>
        </div>
      </div>
    </div>
</nav>

I'm using Tailwind CSS classes here for styling.

Updating Our Blog List Template

Now, let's modify our templates/blogs/list.html file to include this navbar. Here's how it should look:

{% extends "base.html" %}

{% block title %}
<title>Blog List</title>
{% endblock title %}

{% block body %}
{% include "components/navbar.html" %}
<h1 class="text-3xl font-bold text-center">Blog List</h1>
{% endblock body %}

Why This Approach is Good ?

DRY Principle: Remember the "Don't Repeat Yourself" principle I mentioned in earlier posts? This is a perfect example. Write once, use everywhere.

Maintainability: Want to change the navbar? Edit one file, and it updates across your entire application. No more hunting through multiple templates!

Consistency: Your navbar will look exactly the same on every page. No more "Oops, I forgot to update this one template" moments.

The include tag is one of those simple features that can dramatically improve your development workflow. It's not flashy, it's not complex, but it's incredibly powerful when used correctly.

P.S. - If you're following along with the code, don't forget to commit your changes: git add . and git commit -m "Add navbar component using include tag"