Create Breadcrumbs Using HTML CSS

Create Breadcrumbs Using HTML CSS

04/22 By frontendshape

Hello everyone, in this sort tutorial we will create simple breadcrumbs using HTML & CSS. Breadcrumbs is useful to find current page & seo. Toady we will create breadcrumb navigation using flex.


Create Breadcrumbs Using HTML CSS

1) Simple breadcrumbs using .flex and .gap class. you can also use ::before content for breadcrumbs icons like arrow or other symbol.

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Create Breadcrumbs Using HTML CSS</title>
    </head>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }

        .breadcrumb {
            display: flex;
            gap: 20px;
            list-style: none;
        }
    </style>

    <body>
        <ol class="breadcrumb">
            <li><a href="#">Home</a></li>
            <li><span>/</span></li>
            <li><a href="#">Posts</a></li>
            <li><span>/</span></li>
            <li><a href="#" aria-current="page">This is Breadcrumb</a></li>
        </ol>
    </body>

</html> 

css Breadcrumbs

css Breadcrumbs

2) Breadcrumbs with some style.

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Create Breadcrumbs Using HTML CSS</title>
    </head>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }

        .breadcrumb {
            display: flex;
            gap: 20px;
            list-style: none;
        }

        .breadcrumb li a {
            text-decoration: none;
        }

        .bg-gray {
            background-color: #cbd5e1;

        }

        .p-5 {
            padding: 1.25rem;
        }

    </style>

    <body>
        <ol class="breadcrumb bg-gray p-5">
            <li><a href="#">Home</a></li>
            <li><span>/</span></li>
            <li><a href="#">Posts</a></li>
            <li><span>/</span></li>
            <li><a href="#" aria-current="page">This is Breadcrumb</a></li>
        </ol>
    </body>

</html>
Breadcrumbs Using HTML CSS

Breadcrumbs Using HTML CSS


Enter Your Search Query