Breadcrumb Navigasyon

Genel Bakış

Modern ve görsel olarak anlaşılması kolay, ok şeklindeki kırıntı navigasyonu. ‘Klip yolu’ kullanarak, yalnızca CSS kullanarak güzel bir örtüşen ok tasarımı elde ettik. Negatif kenar boşluklarını hesaplayarak her öğe arasında 1 piksellik doğal bir kenarlık (boşluk) oluşturuyoruz.

Kod

<nav aria-label="Breadcrumb" style="max-width: 100%; overflow-x: auto; padding: 4px; box-sizing: border-box;">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a href="#">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-home">
          <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
          <polyline points="9 22 9 12 15 12 15 22"></polyline>
        </svg>
        Home
      </a>
    </li>
    <li class="breadcrumb-item"><a href="#">Products</a></li>
    <li class="breadcrumb-item"><a href="#">Electronics</a></li>
    <li class="breadcrumb-item active" aria-current="page">Smartphones</li>
  </ol>
</nav>

/* Gezinmenin tamamı için kapsayıcı */
.breadcrumb {
  display: inline-flex;
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: #cbd5e1; /* Kenarlık rengi */
  border: 1px solid #cbd5e1; /* Outer frame */
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.breadcrumb-item {
  display: flex;
}

/* Common style for links and active state */
.breadcrumb-item a,
.breadcrumb-item.active {
  display: flex;
  align-items: center;
  padding: 12px 24px 12px 36px;
  background-color: #ffffff;
  color: #475569;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  position: relative;
  transition: background-color 0.2s, color 0.2s;
  
  /* Klip yolu ile ok şekli oluştur */
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%);
  
  /* Create a 1px gap by overlapping 15px with previous element */
  margin-left: -15px; 
}

/* Icon spacing adjustment */
.breadcrumb-item a svg {
  margin-right: 6px;
}

/* First element shape and margin adjustment */
.breadcrumb-item:first-child a {
  padding-left: 20px;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
  margin-left: 0;
}

/* Last element (current location) style */
.breadcrumb-item:last-child.active {
  padding-right: 24px;
  background-color: #3b82f6; /* Primary color */
  color: #ffffff;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 16px 50%);
}

/* Hover style */
.breadcrumb-item a:hover {
  background-color: #f8fafc;
  color: #0f172a;
}

/* Karanlık mod uyumlu */
@media (prefers-color-scheme: dark) {
  .breadcrumb {
    background-color: #334155; /* Dark mode border color */
    border-color: #334155;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
  }
  
  .breadcrumb-item a {
    background-color: #1e293b;
    color: #94a3b8;
  }
  
  .breadcrumb-item a:hover {
    background-color: #0f172a;
    color: #e2e8f0;
  }
  
  .breadcrumb-item:last-child.active {
    background-color: #3b82f6;
    color: #ffffff;
  }
}