---
title: "Breadcrumbs in an HTML"  
description: "Breadcrumbs in an HTML"  
author: "Anonymous User"  
published: 2021-07-20  
updated: 2021-07-20  
canonical: https://www.mindstick.com/forum/156555/breadcrumbs-in-an-html  
category: "html"  
tags: ["html", "css-css3"]  
reading_time: 3 minutes  

---

# Breadcrumbs in an HTML

What are the [Breadcrumbs](https://www.mindstick.com/blog/826/bootstrap-scrollspy-miscellaneous-and-breadcrumbs) in an [HTML](https://www.mindstick.com/articles/1530/design-a-simple-stylish-calculator-using-html-css-and-javascript)? And how to use it?

## Replies

### Reply by Anonymous User

Breadcrumbs are a type of secondary navigation property that helps the user to know their location in a website or web application. It is used to show the page checkpoints from where the user entered that trace path is basically at the top of the page after the navigation bar of the Web Application. And if the user wants to switch to any page he can click on that link and return to the original landing point of his path.

You find breadcrumbs specially in a website where a large amount of content is organized in a hierarchical manner. You'll see this in a Web or Web Application where number of steps are there, just like a progress bar.

Breadcrumbs are basically arranged text links in a horizontally way which is separated either by (>) symbol or (/) symbol. It indicates the level of that page relative to the website index page.

So, Let's use it with the help of an example :

```
<!DOCTYPE html>
<html>
<head>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <style>
        ul.breadcrumb {
            padding: 10px 16px;
            list-style: none;
            background-color: #fff1f1;
        }
            ul.breadcrumb li {
                display: inline;
                font-size: 18px;
            }
                ul.breadcrumb li + li:before {
                    padding: 8px;
                    color: black;
                    content: '/\00a0';
                }
                ul.breadcrumb li a {
                    color: #84849d;
                    text-decoration: none;
                }
                    ul.breadcrumb li a:hover {
                        color: #01447e;
                        text-decoration: underline;
                    }
    </style>
</head>
<body>
    <h2>Breadcrumb Pagination</h2>
    <ul class='breadcrumb'>
        <li><a href='#'>Home</a></li>
        <li><a href='#'>Men's Wear'</a></li>
        <li><a href='#'>Sports Wear</a></li>
        <li>Nike Shoes</li>
    </ul>
</body>
</html>
```

Hope this code will be helpful for you.

Happy Coding!


---

Original Source: https://www.mindstick.com/forum/156555/breadcrumbs-in-an-html

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
