XQA
Back to Python
2026-05-135 min read

Breadcrumbs (Python Programming)

Learn Breadcrumbs (Python Programming) step by step with clear examples and exercises.

Title: Breadcrumbs (Python Programming)

Why This Matters

Breadcrumbs are a navigation aid that shows users their current location within a website's hierarchy. They help visitors easily navigate and understand the structure of the site, making it more user-friendly. In this lesson, we will learn how to create breadcrumb navigation in Python using HTML and CSS. This skill is essential for web developers who want to build professional websites with intuitive navigation systems.

Prerequisites

Before diving into creating breadcrumbs, you should have a basic understanding of the following concepts:

  • Python programming
  • HTML (HyperText Markup Language)
  • CSS (Cascading Style Sheets)

Core Concept

Creating Breadcrumb HTML Structure

First, let's create the HTML structure for our breadcrumbs. We will use an unordered list (``) with custom classes to style the breadcrumbs later using CSS.

<ul class="breadcrumb">
<li><a href="/home">Home</a></li>
<li><a href="/about">About Us</a></li>
<li class="active">Contact Us</li>
</ul>

In this example, we have three breadcrumb items: Home, About Us, and Contact Us. The active item (Contact Us) is marked with the class="active" attribute to indicate the current page.

Styling Breadcrumbs with CSS

Next, let's style our breadcrumbs using CSS. We will define a custom class for the breadcrumb container and individual breadcrumb items.

.breadcrumb {
background-color: #f5f5f5;
margin-bottom: 30px;
padding: 15px;
}

.breadcrumb li {
display: inline;
font-size: 14px;
margin-right: 8px;
}

.breadcrumb a {
color: #333;
text-decoration: none;
}

.breadcrumb .active {
color: #777;
}

These CSS rules create a light grey breadcrumb container with a margin and padding for spacing, set the font size, and style the links to have no underline. The active item is given a lighter grey color.

Adding Breadcrumbs to a Web Page

To add breadcrumbs to an HTML page, simply include the HTML structure we created earlier and link to your custom CSS file.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contact Us</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Rest of the web page content -->

<!-- Breadcrumbs -->
<ul class="breadcrumb">
<!-- Breadcrumb items go here -->
</ul>
</body>
</html>

Dynamic Breadcrumbs with Python Flask

If you're building a dynamic web application using Python and the Flask micro-framework, you can create breadcrumbs based on the current page or URL. Here's an example of how to generate breadcrumbs dynamically:

from flask import Flask, render_template
app = Flask(__name__)

@app.route("/contact")
def contact():
breadcrumbs = [
{"title": "Home", "url": "/"},
{"title": "About Us", "url": "/about"},
{"title": "Contact Us", "url": ""},
]

return render_template("contact.html", breadcrumbs=breadcrumbs)

if __name__ == "__main__":
app.run(debug=True)

In this example, we define a list of breadcrumb items with titles and URLs for the Home and About Us pages. The Contact Us item has an empty URL since it's the current page. We then pass this list to our contact.html template using the Flask render_template function.

Worked Example

Now let's create a simple web application with breadcrumbs using Python, Flask, HTML, and CSS.

  1. Install Flask: pip install flask
  2. Create a new file called app.py and paste the following code:
from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def home():
breadcrumbs = [
{"title": "Home", "url": "/"},
]

return render_template("home.html", breadcrumbs=breadcrumbs)

@app.route("/about")
def about():
breadcrumbs = [
{"title": "Home", "url": "/"},
{"title": "About Us", "url": "/about"},
]

return render_template("about.html", breadcrumbs=breadcrumbs)

@app.route("/contact")
def contact():
breadcrumbs = [
{"title": "Home", "url": "/"},
{"title": "About Us", "url": "/about"},
{"title": "Contact Us", "url": ""},
]

return render_template("contact.html", breadcrumbs=breadcrumbs)

if __name__ == "__main__":
app.run(debug=True)
  1. Create a new folder called templates. Inside the templates folder, create three files: home.html, about.html, and contact.html. Paste the following HTML code into each file, replacing the breadcrumb list with the one provided in the corresponding route function from our Flask app.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Breadcrumbs -->
<ul class="breadcrumb">
{% for breadcrumb in breadcrumbs %}
{% if breadcrumb.url == "" %}
<li class="active">{{ breadcrumb.title }}</li>
{% else %}
<li><a href="{{ breadcrumb.url }}">{{ breadcrumb.title }}</a></li>
{% endif %}
{% endfor %}
</ul>

<!-- Rest of the web page content -->
</body>
</html>
  1. Create a new file called styles.css and paste the CSS rules we defined earlier:
.breadcrumb {
background-color: #f5f5f5;
margin-bottom: 30px;
padding: 15px;
}

.breadcrumb li {
display: inline;
font-size: 14px;
margin-right: 8px;
}

.breadcrumb a {
color: #333;
text-decoration: none;
}

.breadcrumb .active {
color: #777;
}
  1. Run the Flask app by executing python app.py. Open your web browser and navigate to http://127.0.0.1:5000/ to see the home page, http://127.0.0.1:5000/about for the about page, and http://127.0.0.1:5000/contact for the contact page.

Common Mistakes

1. Forgetting to define breadcrumb CSS rules

Make sure you have defined the necessary CSS rules in your stylesheet to style your breadcrumbs correctly.

2. Not passing breadcrumbs to templates

In your Flask app, ensure that you pass the breadcrumbs list to the corresponding template for each route.

3. Incorrectly structuring HTML breadcrumb items

Ensure that the HTML structure for breadcrumb items is correct, with a custom class (e.g., breadcrumb) for the container and individual items as links or active items as needed.

Practice Questions

  1. How would you modify the example Flask app to include an additional page called "Services"?
  2. What changes would you make if you wanted to style the breadcrumbs differently, such as changing their background color or font size?
  3. How can you make the breadcrumbs dynamic based on the current URL rather than hardcoding them in each route function?

FAQ

Q: Why are breadcrumbs important for a website's navigation system?

A: Breadcrumbs help users understand the structure of a website and easily navigate to different sections, improving their overall experience.

Q: Can I use breadcrumbs with other web development frameworks besides Flask?

A: Yes, breadcrumbs can be implemented in various web development frameworks, not just Flask. The process may vary depending on the framework you're using.

Q: How do I make my breadcrumbs responsive for mobile devices?

A: To make your breadcrumbs responsive, you can adjust the CSS rules to adapt to different screen sizes. For example, you might set a maximum width or use media queries to adjust the layout on smaller screens.

Breadcrumbs (Python Programming) | Python | XQA Learn