Skip to content
EN KO VI NE KM ID
Design business cards Character collection 16 designs · PNG / SVG / PDF

Breadcrumbs

For telling someone deep in a hierarchy where they are and what sits one level up.

Navigation

Live preview

Source

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

How to use it

  • Skip them at two levels; they only earn the space at three or more
  • The last crumb is the current page, not a link — mark it aria-current="page"
  • Hide the separators with aria-hidden so they aren't read out as 'chevron'

Watch out for

  • On narrow screens collapse the middle and keep both ends; a wrapped trail stops reading as a path
  • Truncate long titles but keep the full text in title or aria-label

Next