Creating a CSS-only Breadcrumb with Arrows
In this blog post, we will learn how to create a CSS-only breadcrumb with arrows. Breadcrumbs are an essential part of website navigation, as they provide a clear path for users to follow when browsing through a website. Arrows in breadcrumbs make it even more visually appealing and easier to follow. Let’s dive in and see how we can create this using just CSS.
Step 1: Setting up the HTML structure
First, we will create a simple HTML structure for our breadcrumb, containing an unordered list with list items and anchor tags representing each level in the breadcrumb.
<!-- HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS-only Breadcrumb with Arrows</title>
</head>
<body>
<nav class="breadcrumb">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Category</a></li>
<li><a href="#">Subcategory</a></li>
<li><a href="#">Product</a></li>
</ul>
</nav>
</body>
</html>Step 2: Styling the breadcrumb container
Now, let’s apply some basic styles to the breadcrumb container, setting a font family and removing the default list styles.
/* CSS */
.breadcrumb {
font-family: Arial, sans-serif;
}
.breadcrumb ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
}
.breadcrumb li {
display: inline;
}Step 3: Adding and styling the arrows
To create arrows, we will use the CSS ::after pseudo-element to insert content after each list item. We’ll use the content property with a value of a right angle quote (›) as our arrow. We will style the arrow by adjusting its color, padding, and margin. We will also remove the arrow from the last list item using the :last-child pseudo-class.
/* CSS */
.breadcrumb li a {
color: #007bff;
text-decoration: none;
padding: 0 10px;
position: relative;
}
.breadcrumb li a::after {
content: '›';
color: #6c757d;
position: absolute;
top: 0;
right: -10px;
}
.breadcrumb li:last-child a::after {
content: '';
}
.breadcrumb li:last-child a {
color: #6c757d;
pointer-events: none;
}Step 4: Adding hover effect (optional)
You can add a hover effect to the breadcrumb links to make them more interactive. Here, we’ll change the text color on hover.
/* CSS */
.breadcrumb li a:hover {
color: #0056b3;
}
.breadcrumb li:last-child a:hover {
color: #6c757d;
}Conclusion:
Now you have successfully created a CSS-only breadcrumb with arrows. This visually appealing and straightforward navigation element will help users navigate your website more efficiently.