Creating a Responsive Breadcrumb Navigation with HTML and CSS

Breadcrumb navigation is a helpful way for users to understand their current location within a website and keep track of their path as they navigate through the pages. This type of navigation is particularly useful for large and complex websites where users may need to traverse multiple levels of hierarchy to find the information they are looking for. In this article, we will show you how to create a responsive breadcrumb navigation using HTML and CSS.

HTML Structure

The HTML structure of a breadcrumb navigation is straightforward. We start by creating a container element to hold the entire navigation. In this example, we will use a div with a class of "breadcrumb". Within this container, we create a list of items that represent each level of the hierarchy. Each list item will contain a link to the corresponding page, with the text of the link representing the name of the level.

Here is the HTML code for a basic breadcrumb navigation:

<div class="breadcrumb">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Category</a></li>
    <li><a href="#">Page</a></li>
  </ul>
</div>

CSS Styles

Now that we have the basic HTML structure in place, it's time to add some styles to make the breadcrumb navigation look and function as we want.

To start, we'll set the background color, text color, and font for the breadcrumb container. We'll also use the "display: flex" property to arrange the items within the container as a horizontal row.

.breadcrumb {
  background-color: #f5f5f5;
  color: #333;
  font-size: 14px;
  display: flex;
  align-items: center;
  padding: 10px;
}

Next, we'll style the list items within the breadcrumb. We'll set the margin and padding to zero and use the "display: inline-block" property to display the items as blocks that sit next to each other.

.breadcrumb ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.breadcrumb ul li {
  margin: 0;
  padding: 0;
  display: inline-block;
}

Finally, we'll add some styles to the links within the breadcrumb. We'll set the color, text-decoration, and padding. Additionally, we'll use the ":before" and ":after" pseudo-elements to add separators between the items.

.breadcrumb ul li a {
  color: #333;
  text-decoration: none;
  padding: 10px 20px;
  position: relative;
}

.breadcrumb ul li a:before {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #f5f5f5 transparent transparent transparent;
  left: 20px;
}

.breadcrumb ul li a:after {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
  left: 20px;
}

.breadcrumb ul li:first-child a:before {
  border-color: transparent transparent transparent #f5f5f5;
}

.breadcrumb ul li:last-child a {
  padding-right: 0;
}

.breadcrumb ul li:last-child a:after {
  border-color: transparent transparent transparent #333;
}

Responsiveness

To make the breadcrumb navigation responsive, we need to make sure that it adjusts its appearance based on the screen size. We can do this by using media queries in CSS.

Here is an example of a media query that will change the font size of the breadcrumb when the screen size is less than 500px:

You can add additional media queries to adjust the appearance of the breadcrumb based on different screen sizes.

Conclusion

In this article, we have shown you how to create a responsive breadcrumb navigation using HTML and CSS. By using simple HTML and CSS, you can create a user-friendly navigation that will help users understand their current location within your website and keep track of their path as they navigate through the pages. With the addition of media queries, you can make the navigation responsive, ensuring that it looks great on any screen size.