Breadcrumb
Untuk memberi tahu orang di hierarki dalam: sedang di mana, dan satu tingkat di atasnya apa.
Pratinjau langsung
Sumber
<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; }
}Cara memakainya
- Lewati saat hanya dua tingkat; baru berguna pada tiga tingkat atau lebih
- Crumb terakhir adalah halaman ini, bukan tautan — beri aria-current="page"
- Sembunyikan pemisah dengan aria-hidden agar tidak ikut dibacakan
Hal yang perlu diwaspadai
- Di layar sempit, ringkas bagian tengah dan sisakan kedua ujungnya
- Potong judul panjang tapi simpan teks lengkap di title atau aria-label