Tổng quan

Điều hướng đường dẫn hình mũi tên hiện đại và dễ hiểu. Bằng cách sử dụng clip-path, chúng tôi đã đạt được thiết kế mũi tên chồng chéo đẹp mắt chỉ bằng CSS. Bằng cách tính toán lề âm, chúng tôi tạo đường viền (khoảng cách) 1px tự nhiên giữa mỗi phần tử.

Mã số

<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>

/* Vùng chứa cho toàn bộ điều hướng */
.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; /* Màu đường viền */
  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;
  
  /* Tạo hình mũi tên bằng clip-path */
  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;
}

/* Tương thích với chế độ tối */
@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;
  }
}