2+ Breadcrumb Components - Vanilla CSS

Breadcrumbs are navigation aids used on websites to show users the path they have taken to arrive at a specific page. They typically appear as a trail of clickable links at the top or bottom of a webpage, representing the hierarchy of pages visited. Breadcrumbs help users understand their current location within the website's structure and provide a convenient way to backtrack or navigate to related pages. In this collection, you'll find various designs for breadcrumb components that you can easily incorporate into your website's design. Whether you need basic breadcrumbs or more visually appealing styles, these components are designed to enhance user navigation and provide a seamless browsing experience for your website visitors.

Breadcrumb with Icons

Elevate user experience by incorporating icons into your website's breadcrumbs using HTML and CSS. Guide users effortlessly through your site with visually appealing navigation cues.

Author: Admin

Preview
Code

<ul class="breadcrumb">
  <li class="breadcrumb-item"><span class="lnr lnr-home"></span><a href="#">Home</a></li>
  <li class="breadcrumb-item"><span class="lnr lnr-chevron-right"></span><a href="#">Category</a></li>
  <li class="breadcrumb-item"><span class="lnr lnr-chevron-right"></span><a href="#">Subcategory</a></li>
  <li class="breadcrumb-item"><span class="lnr lnr-chevron-right"></span>Current Page</li>
</ul>

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

.breadcrumb-item {
  display: flex;
  align-items: center;
  margin-right: 10px;
  font-size: 16px;
  color: #333;
}

.breadcrumb-item:last-child {
  color: #777;
}

.breadcrumb-item:last-child:hover {
  cursor: default;
}

.breadcrumb-item a {
  text-decoration: none;
  color: #007bff;
  transition: color 0.3s ease;
  margin-left: 5px;
}

.breadcrumb-item a:hover {
  color: #0056b3;
}

.breadcrumb-item span {
  margin-right: 5px;
  font-weight: 600;
}

@media screen and (max-width: 600px) {
  .breadcrumb-item {
    margin: 5px;
    font-size: 14px;
  }
}

```
No need of JavaScript
```

Responsive Breadcrumb

Enable seamless navigation on any device with responsive breadcrumbs designed using HTML and CSS. Enhance user experience by providing intuitive navigation paths that adapt to various screen sizes.

Author: Admin

Preview
Code

<ul class="breadcrumb">
 <li class="breadcrumb-item"><a href="#">Home</a></li>
 <li class="breadcrumb-item"><a href="#">Components</a></li>
 <li class="breadcrumb-item"><a href="#">Category</a></li>
 <li class="breadcrumb-item">Current Page</li>
</ul>

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

.breadcrumb-item {
  margin-right: 10px;
  font-size: 16px;
  color: #333;
}

.breadcrumb-item:last-child {
  color: #777;
}

.breadcrumb-item:last-child:hover {
  cursor: default;
}

.breadcrumb-item a {
  text-decoration: none;
  color: #007bff;
  transition: color 0.3s ease;
}

.breadcrumb-item a:hover {
  color: #0056b3;
}

.breadcrumb-item::after {
  content: '/';
  margin-left: 10px;
}

.breadcrumb-item:last-child::after {
    display: none;
  }

@media screen and (max-width: 600px) {
  .breadcrumb-item {
    margin: auto 5px;
    font-size: 14px;
  }
}

```
No need of JavaScript
```

Simple Breadcrumb

Simplify user navigation on your website using breadcrumbs implemented with HTML and CSS. Enhance user experience by providing clear paths and easy backtracking through pages.

Author: Admin

Preview
Code

<ul class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Home</a></li>
  <li class="breadcrumb-item"><a href="#">Category</a></li>
  <li class="breadcrumb-item"><a href="#">Subcategory</a></li>
  <li class="breadcrumb-item">Current Page</li>
</ul>

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

.breadcrumb-item {
  margin-right: 10px;
  font-size: 16px;
  color: #333;
}

.breadcrumb-item:last-child {
  color: #777;
}

.breadcrumb-item:last-child:hover {
  cursor: default;
}

.breadcrumb-item a {
  text-decoration: none;
  color: #007bff;
  transition: color 0.3s ease;
}

.breadcrumb-item a:hover {
  color: #0056b3;
}

.breadcrumb-item::after {
  content: '/';
  margin-left: 10px;
}

```
No need of JavaScript
```