html

HTML | Breadcrumbs

While using a website, we often need to use the navigation bar, which consists of navigation tabs. These navigation tabs help the user to reach several sections of the website by just clicking them. However, it does not show the whole path of the section where the user at. For this purpose, the “breadcrumbs” are utilized in websites as they not only help the users but also display the structure of the website by showing the whole path of the section where they are at.

This article will demonstrate how to create breadcrumbs in HTML.

What is the Difference Between Navigation Bar and Breadcrumbs in HTML?

The navigation bar is mostly presented at the very top of the website. For instance, a navigation bar looks like this:

Whereas the breadcrumb is utilized to provide aid to the navigation bar, so it is placed above the content of the website like this:

You have realized the difference between the navigation bar and breadcrumbs. Now, the next section will demonstrate an example of creating breadcrumbs in HTML.

How to Create Breadcrumbs in HTML?

In HTML, first, add a <div> with the class name “main-content”. Inside this div element, add one more <div> element having the class name “breadcrumbs”. After that, add an unordered list <ul> tag which includes several <li> tags contents as shown below in the code block:

<div class="main-content">
    <div class="breadcrumbs">
        <ul class="breadcrumbs-1">
            <li><a href="#">Home</a></li>
            <li><a href="#">courses</a></li>
            <li><a href="#">Front-end development</a></li>
            <li><a href="#">HTML</a></li>
        </ul>
</div>

By providing the above code, the output will look like this:

As you can see, the structure of the breadcrumbs has been successfully created. Now, apply styling properties to the HTML elements.

Style all Elements

 * {
    margin: 0;
    padding: 0;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

The properties applied to all the elements “*” of HTML are explained below:

  • margin” property is given value “0”; it will not give space outside the element.
  • padding” property is given value “0”; it will not produce space around the content of the div element.
  • font-family” is utilized to select any font style.

Style main-content div

.main-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

The div with the name “main-content” is applied with properties that are described below:

  • max-width” property specifies the width of the div main-content must not exceed “800px”.
  • margin” property with the value set as “0 auto” represents 0px space on top and bottom and equal space on the left and right of the div element.
  • padding” property is utilized to generate “20px” space around the content of the div element.

Style breadcrumbs ul Element

.breadcrumbs ul {
    margin: 10px;
    padding: 20px;
    display: inline-flex;
    list-style: none;
    background-color: rgb(204, 204, 138);
}

The above code represents the CSS properties applied to the <ul> element of the div breadcrumbs. The explanation of these properties is mentioned below:

  • margin” property with the value “10px” is set to give 10px of space outside the <ul> element.
  • padding” property sets “20px” of space around the content of the <ul> element.
  • display” property with the value “inline-flex” makes the flex container inline.
  • list-style” property with the value “none” removes the default styles of the <ul> element such as bullets.
  • background-color” property sets the element’s background color.

Style breadcrumbs li Elements

.breadcrumbs ul li {
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
}

The <li> element within the div breadcrumbs are applied with the CSS properties that are described below:

  • padding-left” sets 10px space at the left of the content.
  • padding-right” sets 10px space at the right of the content.
  • position” property is set as relative to adjust the element relative to its current position.

Insert style before li

.breadcrumbs ul.breadcrumbs-1 li::before {
    content: '>';
    position: absolute;
    color: blueviolet;
    font-size: 20px;
    left: -4px;
    top: -2px;
}

The <li> element of the breadcrumbs-1 div is applied with the CSS properties that are described below:

  • .breadcrumbs ul.breadcrumbs-1 li::before”: before is the pseudo-element that refers to the styling properties insert before the <li> element of the breadcrumbs-1 div which is present inside the <ul> element of the breadcrumbs div.
  • content” property is utilized with pseudo-elements before and after. It inserts the content assigned to it before the element.
  • position” with the value set as absolute positions the <li> element with respect to their parent div.
  • color” property is utilized to set the font color.
  • font-size” adjusts the size of the font to 20px.
  • left” property with the value set as -4 provides -4px horizontal space.
  • top” property with the value set as -2 provides -2px space from the top.

By providing the above-mentioned code, we will get the following result:

It can be seen that the redirect symbol (>) is displayed at the start of the <ul> element, which is not necessary.

Style to Remove First Symbol

.breadcrumbs ul li:first-child::before {
    display: none;
}

li:first-child” represents the first child of the li element, and “li:first-child::before” indicates the icon used before the first li element. Whereas the “display: none” property removes the symbol before the first element.

Style HTML an Element

.breadcrumbs ul li a {
    text-decoration: none;
}

The anchor tag used within the <li> element is applied with the property “text-decoration” with the value “none” to remove the underline style.

The above code will display the result as shown below:

That’s cool! The breadcrumbs of our website have been successfully created.

You can also use other symbols as well by just assigning the symbol to the CSS content property in the above code as:

content: '|';

The above-mentioned code will display the result as shown in the image:

The symbol “o” can also be utilized in our breadcrumbs by signing in to the CSS content property as:

content: 'o';

Output

Great! We have learned to create breadcrumbs for our website successfully.

Conclusion

On web pages, Breadcrumbs are important for the accessibility of users. It not only aids in navigation but also displays the users the whole path to the section of the site where they are at. HTML provides us with several elements to create breadcrumbs. This article has demonstrated the procedure to create breadcrumbs in HTML with the help of a detailed example.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.