Đến nội dung chính
EN KO VI NE KM ID
Thiết kế danh thiếp English Bộ sưu tập nhân vật 16 mẫu · PNG / SVG / PDF

Đường dẫn breadcrumb

Để cho người ở sâu trong cấu trúc biết mình đang ở đâu và cấp trên là gì.

Điều hướng

Xem trước trực tiếp

Nguồn

<nav class="dc-bc" aria-label="현재 위치">
  <ol class="dc-bc__list">
    <li class="dc-bc__item"><a class="dc-bc__link" href="#">홈</a></li>
    <li class="dc-bc__item"><span class="dc-bc__sep" aria-hidden="true">›</span><a class="dc-bc__link" href="#">디자인 조각</a></li>
    <li class="dc-bc__item"><span class="dc-bc__sep" aria-hidden="true">›</span><a class="dc-bc__link" href="#">내비게이션</a></li>
    <li class="dc-bc__item"><span class="dc-bc__sep" aria-hidden="true">›</span><span class="dc-bc__current" aria-current="page">이동 경로</span></li>
  </ol>
</nav>
.dc-bc { font-family: var(--dc-font); font-size: 13px; }
.dc-bc__list {
  display: flex; flex-wrap: wrap; align-items: center;
  list-style: none; margin: 0; padding: 0;
}
.dc-bc__item { display: flex; align-items: center; min-width: 0; }
.dc-bc__sep { padding: 0 var(--dc-1); color: var(--dc-text-mute); font-size: 12px; }
.dc-bc__link {
  display: inline-flex; align-items: center; min-height: 32px;
  padding: 0 var(--dc-1); border-radius: var(--dc-r-xs);
  color: var(--dc-text-sub); text-decoration: none;
  transition: color var(--dc-fast);
}
.dc-bc__link:hover { color: var(--dc-brand-text); text-decoration: underline; }
.dc-bc__current {
  display: inline-block; max-width: 32ch; padding: 0 var(--dc-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--dc-text); font-weight: 700;
}
.dc-bc__more {
  display: grid; place-items: center; min-width: 32px; min-height: 32px;
  border: 0; border-radius: var(--dc-r-xs);
  background: transparent; color: var(--dc-text-sub);
  font-family: inherit; font-size: 14px; cursor: pointer;
}
.dc-bc__more:hover { background: var(--dc-sunken); color: var(--dc-text); }
@media (max-width: 520px) {
  .dc-bc__current { max-width: 16ch; }
}

Cách dùng

  • Chỉ hai cấp thì bỏ qua; từ ba cấp trở lên mới đáng chỗ
  • Mục cuối là trang hiện tại, không phải liên kết — đặt aria-current="page"
  • Ẩn dấu phân cách bằng aria-hidden để không bị đọc thành 'dấu mũi nhọn'

Điểm cần lưu ý

  • Màn hình hẹp nên thu gọn phần giữa, giữ hai đầu; xuống dòng thì không còn giống đường dẫn
  • Cắt tiêu đề dài nhưng giữ nguyên bản đầy đủ trong title hoặc aria-label

Tiếp theo