PUBLISHED ON: AUGUST 18, 2021
How to create a breadcrumb navigation with CSS?
Breadcrumb is a sequence of links that track the user where they are on websites and how far they are from the main page. Breadcrumbs help users to navigate through the page easily.
It also helps to easily return to the previous pages. Breadcrumbs are usually found at the top of the web page just below the navigation bar. We can easily create breadcrumb with CSS.
Creating a Breadcrumb
To create a breadcrumb, use the unordered list and add links to it. Then remove the default style of the link using text-decoration:none and list-style:none. A backslash can be used as the separator for the links which will be added before each link.
The backslash can be added with content: /\00a0. Also, customize the links with other CSS properties.
Example: Creating a breadcrumb with CSS
In this example, we have created a breadcrumb with CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML </title>
<style>
/* Remove default style of list */
.breadcrumb{
padding: 8px 14px;
list-style: none;
background-color: #cccccc;
}
/* Display list items horizontally*/
li {
display: inline;
font-size: 16px;
}
/* Add a backslash symbol (/) before each list item */
li+li:before {
padding: 10px;
color: green;
content: "/\00a0";
}
/* Remove style of links */
a {
color: blue;
text-decoration: none;
}
/* Add a color on hover */
a:hover {
color: black;
}
</style>
</head>
<body>
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Study Material</a></li>
<li><a href="#">Course</a></li>
<li>More</li>
</ul>
</body>
</html>
Output
Here is the output of the above example.
Example: Creating a breadcrumb with CSS
We can use a separator of our choice to create a breadcrumb. Here in this example, we have used greater than (">") for it.
Conclusion
In this tutorial, we have created a breadcrumb with CSS. The separator can be used between links with :before class. It has been explained with examples.
