What is breadcrumbs in 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?

tag which includes several
tags contents as shown below in the code block:

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

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 ) ;
}

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
  element.
  • “padding” property sets “20px” of space around the content of the
    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
      element such as bullets.
      • “background-color” property sets the element’s background color.

      Style breadcrumbs li Elements

      • “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 ;
      }

      • “.breadcrumbs ul.breadcrumbs-1 li::before”: before is the pseudo-element that refers to the styling properties insert before the
      • element of the breadcrumbs-1 div which is present inside the
        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
        • 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:

        

        element, which is not necessary.

        Style to Remove First Symbol

        “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

        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:

        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:

        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.

        Источник