How to Create Breadcrumbs using HTML and CSS ?

Create an attractive Breadcrumbs navigation is quite difficult for NON-CSS experts. Without using CSS, the Breadcrumbs navigation will steal your website’s gorgeousness. By using only HTML and CSS we can create an attractive Breadcrumbs navigation. In this article, the main focus will be CSS. We will create the structure for the breadcrumbs first after that we will design the structure as we want.

Creating Structure: Here we will create a normal structure by using <li> tag. That will create a simple interface you can check that by running the following code:

  • HTML Code:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>Creating Breadcrumbs</title>
      
    </head>
      
    <body>
        <h1>GeeksforGeeks</h1>
        <b>Creating Breadcrumbs</b>
        <ul class="addressLink">
            <li>
                <a href="#">Web Technologies</a>
            </li>
            <li>
                <a href="#">HTML</a>
            </li>
            <li>
                <a href="#">Tags</a>
            </li>
            <li>
                <a href="#">Attributes</a>
            </li>
        </ul>
    </body>
      
    </html>

    chevron_right

    
    

Designing Structure: Here is the most difficult task is to create arrow-shaped into the right side of the Breadcrumbs. To create that arrow-shaped we will use ::after selector. Place one list on another list by using the z-index property. Other things are quite easy for a CSS developer.

  • CSS Code:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <style>
        body {
            text-align: center;
        }
        h1{
            color: green;
        }
          
        .addressLink {
            list-style: none;
            overflow: hidden;
            font: 16px;
            margin: 30px;
            padding: 0px;
            border: 2px solid black;
            font-style: italic;
        }
          
        .addressLink li {
            float: left;
        }
          
        .addressLink li a {
            background: #006600;
            color: white;
            text-decoration: none;
            padding: 5px 0px 5px 65px;
            position: relative;
            float: left;
        }
          
        .addressLink li a:after {
            content: " ";
            border-top: 50px solid transparent;
            border-bottom: 50px solid transparent;
            border-left: 30px solid #006600;
            margin-top: -50px;
            position: absolute;
            top: 50%;
            left: 100%;
            z-index: 2;
        }
          
        .addressLink li a:before {
            content: " ";
            border-top: 50px solid transparent;
            border-bottom: 50px solid transparent;
            border-left: 30px solid white;
            position: absolute;
            top: 50%;
            left: 100%;
            z-index: 1;
        }
          
        .addressLink li:first-child a {
            padding-left: 10px;
        }
          
        .addressLink li:nth-child(2) a {
            background: #009933;
        }
          
        .addressLink li:nth-child(2) a:after {
            border-left-color: #009933;
        }
          
        .addressLink li:nth-child(3) a {
            background: #33cc33;
        }
          
        .addressLink li:nth-child(3) a:after {
            border-left-color: #33cc33;
        }
          
          
        .addressLink li:last-child a {
            background: transparent !important;
            color: black;
        }
          
        .addressLink li:last-child a:after {
            border: 0;
        }
          
        .addressLink li a:hover {
            background: #99ff99;
        }
          
        .addressLink li a:hover:after {
            border-left-color: #99ff99 !important;
        }
    </style>

    chevron_right

    
    

Final Solution: In this section, we will combine both the HTML and CSS code to Create Breadcrumbs.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Creating Breadcrumbs</title>
    <style>
        body {
            text-align: center;
        }
        h1{
            color: green;
        }
          
        /* Styling addressLink class */
        .addressLink {
            list-style: none;
            overflow: hidden;
            font: 16px;
            margin: 30px;
            padding: 0px;
            border: 2px solid black;
            font-style: italic;
        }
          
        /* Floating addressLink list */
        .addressLink li {
            float: left;
        }
          
        /* Styling addressLink list's anchor element*/
        .addressLink li a {
            background: #006600;
            color: white;
            text-decoration: none;
            padding: 5px 0px 5px 65px;
            position: relative;
            float: left;
        }
          
        .addressLink li a:after {
            content: " ";
            border-top: 50px solid transparent;
            border-bottom: 50px solid transparent;
            border-left: 30px solid #006600;
            margin-top: -50px;
            position: absolute;
            top: 50%;
            left: 100%;
            z-index: 2;
        }
          
        .addressLink li a:before {
            content: " ";
            border-top: 50px solid transparent;
            border-bottom: 50px solid transparent;
            border-left: 30px solid white;
            position: absolute;
            top: 50%;
            left: 100%;
            z-index: 1;
        }
          
        /* First child padding */
        .addressLink li:first-child a {
            padding-left: 10px;
        }
          
        /* Second child bg-color */
        .addressLink li:nth-child(2) a {
            background: #009933;
        }
          
        /* Second child Second half bg-color */
        .addressLink li:nth-child(2) a:after {
            border-left-color: #009933;
        }
          
        /* Third child bg-color */
        .addressLink li:nth-child(3) a {
            background: #33cc33;
        }
          
        /* Third child Second half bg-color */
        .addressLink li:nth-child(3) a:after {
            border-left-color: #33cc33;
        }
          
        /* Last child bg-color and text-color */
        .addressLink li:last-child a {
            background: transparent !important;
            color: black;
        }
          
        .addressLink li:last-child a:after {
            border: 0px;
        }
          
        /* Hover on list's anchor element */
        .addressLink li a:hover {
            background: #99ff99;
        }
          
        .addressLink li a:hover:after {
            border-left-color: #99ff99 !important;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <b>Creating Breadcrumbs</b>
    <ul class="addressLink">
        <li>
            <a href="#">Web Technologies</a>
        </li>
        <li>
            <a href="#">HTML</a>
        </li>
        <li>
            <a href="#">Tags</a>
        </li>
        <li>
            <a href="#">Attributes</a>
        </li>
    </ul>
</body>
  
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.