Create "navigation breadcrumb"

html css breadcrumbs

41,029

<!DOCTYPE html>
<html>

<head>

    <style type="text/css">
        html{
            background:#222;
            font-size:12px;
            font-family:Arial;
        }

        ul#breadcrumbs{         
            list-style:none;
            /* optional */
            margin:100px;
            padding:10px 2px 10px 10px;
            background:#000;
            width:295px;
            height:30px;
            border-radius:5px;
            border:1px solid #222;
            -moz-box-shadow:0 0 3px 0 #000;
        }
        ul#breadcrumbs li{
            float:left;
            background:#93ce68 url(bg.png)no-repeat right;
            height:30px;
            padding:0 23px 0 10px;
            text-align:center;
            text-decoration:none;
            color:#000;
            line-height:32px;
        }
        ul#breadcrumbs li.active{
            background:url(bg.png)no-repeat right;
            color:#000;
        }
        ul#breadcrumbs li a{
            display:block;
            text-decoration:none;
            color:#fff;
            line-height:32px;
            text-shadow:0 0 2px #222;
        }
        ul#breadcrumbs li a:hover{
            color:#a2ff00;
        }

    </style>

</head>

<body>

    <ul id="breadcrumbs">
        <li><a href="">Home</a></li>
        <li><a href="">Page1</a></li>
        <li><a href="">Page2</a></li>
        <li class="active">About Us</li>
    </ul>



</body>
</html>

enter image description here

Save image in root of html and use clearfix for ul to clearing li float value. if you use CSS border technique, that may render blurry border in some browser. Hope it will solve your query.

41,029

Author by

oliverbj

Updated on February 13, 2020

Comments

oliverbj about 4 years

I am wondering how I am able to obtain this with CSS/CSS3 and HTML. How can this be done?

As you can see, I pointed out the 3 navigation breadcrumb.