forum

Home / DeveloperSection / Forums / Breadcrumbs in an HTML

Ask Question
Anonymous User

Anonymous User

Follow
I am a content writter !

Can you answer this question?

Answer

1 Answers

Anonymous User

Anonymous User

04-Aug-2021

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!

MindStick Training

Liked By