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:
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
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
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
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
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
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
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:
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.
