Breadcrumbs in an HTML

What are the Breadcrumbs in an HTML? And how to use it?

Last updated:7/20/2021 1:20:55 AM

1 Answers

Ethan Karla
Ethan Karla

A “breadcrumb” (or “breadcrumb trail”) is a type of secondary navigation scheme that reveals the user’s location in a website or Web application. The term comes from the Hansel and Gretel fairy tale in which the two title children drop breadcrumbs to form a trail back to their home. Just like in the tale, breadcrumbs in real-world applications offer users a way to trace the path back to their original landing point.

You can usually find breadcrumbs in websites that have a large amount of content organized in a hierarchical manner. You also see them in Web applications that have more than one step, where they function similar to a progress bar. In their simplest form, breadcrumbs are horizontally arranged text links separated by the “greater than” symbol (>); the symbol indicates the level of that page relative to the page links beside it.

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!


Answer