Breadcrumbs | StylizerCSS Modern CSS framework

Introduction

A breadcrumb navigation provide links back to each previous page the user navigated through, and shows the user's current location in a website.

Example :

Code :


<ul class="breadcrumb">
  <li class="breadcrumb-item">
    <a href="#">First</a>
  </li>
   <li class="breadcrumb-item">
    <a href="#">Second</a>
  </li>
   <li class="breadcrumb-item">
    <a href="#">Third</a>
  </li>  
</ul>

SCSS


// ---------------------------------------------------------------
// This file contains all styles related to the Breadcrumbs component.
// ---------------------------------------------------------------

.breadcrumb {
  list-style: none;
  margin: .2rem 0;
  padding: .2rem 0;
  .breadcrumb-item {
    color: #66758c;
    display: inline-block;
    margin: 0;
    padding: .2rem 0;
    &:not(:last-child) {
      margin-right: .2rem;
      a {
        color: #66758c;
      }
    }
    &:not(:first-child)::before {
      color: #66758c;
      content: "/";
      padding-right: .4rem;
    }
  }
}