본문 바로가기
Design System
홈페이지

Components · 내비게이션

Breadcrumb (브레드크럼)

사이트 계층에서 현재 페이지의 위치와 상위 경로를 보여 주는 내비게이션 컴포넌트. 다단계 페이지 구조가 있는 사이트에 쓴다.

정의

사이트 계층에서 현재 페이지의 위치와 상위 경로를 순서대로 보여 주는 내비게이션 컴포넌트다.

Anatomy

홈 / 카탈로그 / 노면표시 / 서행 유도 표시 ① 상위 링크 ② 구분자 ③ 현재 위치
부위토큰
① 상위 링크--breadcrumb-fg(muted), 클릭 시 해당 계층으로 이동
② 구분자--breadcrumb-separator(faint), 장식이므로 aria-hidden
③ 현재 위치--breadcrumb-fg-current, 링크 아님 + aria-current="page"

변형

변형용도
전체 경로(기본)데스크톱 — 홈부터 현재까지 최대 4단계 노출
축약형모바일·좁은 폭 — 처음·끝만 남기고 중간은 말줄임(…)

상태

상태상위 링크현재 위치
Defaultfg --breadcrumb-fgfg --breadcrumb-fg-current(비인터랙티브)
Hover밑줄 표시—
Focusbox-shadow: var(--focus-ring)해당 없음(링크 아님)

Do / Don't

Do
  • 페이지 제목 바로 위에 둔다 — 위치를 먼저 알리고 제목으로 이어지게.
  • 링크는 최대 4개로 유지하고, 더 깊으면 축약형(…)으로 접는다.
  • 현재 위치는 링크가 아닌 텍스트로 두고 aria-current="page"를 준다.
Don't
  • 계층이 없는(한 단계뿐인) 페이지에 브레드크럼을 넣지 말 것 — 보여 줄 경로가 없다.
  • 구분자(/)를 링크로 만들지 말 것 — 장식이므로 스크린리더에서 감춘다.
  • 현재 페이지를 클릭 가능한 링크로 두지 말 것 — 이동할 곳이 없다.

콘텐츠 규칙

  • 각 단계 라벨은 그 페이지 제목과 같은 명사구로 — 임의로 바꾸지 않는다.
  • 라벨은 1~2어절로 짧게, 길면 축약형에서 말줄임(…)으로 처리한다.
  • 첫 항목은 보통 "홈" — 사이트 최상위를 가리킨다.
  • 전역 규칙: ../guidelines/ux-writing.md.

키보드 인터랙션

키동작
Tab상위 링크로 순차 이동(현재 위치는 링크가 아니라 건너뜀)
Enter포커스된 링크로 이동

접근성

  • <nav aria-label="브레드크럼"> 안에 <ol>·<li>로 순서를 의미화한다.
  • 현재 위치 항목에 aria-current="page", 링크가 아닌 텍스트로 둔다.
  • 구분자(/)는 CSS로 그리거나 aria-hidden="true"로 스크린리더에서 감춘다.
  • 링크는 색만으로 구분하지 말고 hover·focus에서 밑줄을 함께(저시력 대비).
  • 기준: ../guidelines/accessibility.md.

코드

html
<nav class="pi-breadcrumb" aria-label="브레드크럼">
  <ol class="pi-breadcrumb__list">
    <li class="pi-breadcrumb__item"><a class="pi-breadcrumb__link" href="#">홈</a></li>
    <li class="pi-breadcrumb__item"><a class="pi-breadcrumb__link" href="#">카탈로그</a></li>
    <li class="pi-breadcrumb__item"><a class="pi-breadcrumb__link" href="#">노면표시</a></li>
    <li class="pi-breadcrumb__item"><span class="pi-breadcrumb__current" aria-current="page">서행 유도 표시</span></li>
  </ol>
</nav>
css
.pi-breadcrumb__list {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  list-style: none; margin: 0; padding: 0;
  font: var(--text-body-sm);
}
.pi-breadcrumb__item { display: inline-flex; align-items: center; gap: var(--space-2); }
.pi-breadcrumb__item:not(:first-child)::before {
  content: "/"; color: var(--breadcrumb-separator);
}
.pi-breadcrumb__link {
  color: var(--breadcrumb-fg); text-decoration: none;
  padding: var(--space-1) 0; word-break: keep-all;
}
.pi-breadcrumb__link:hover { text-decoration: underline; }
.pi-breadcrumb__link:focus-visible {
  outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm);
}
.pi-breadcrumb__current {
  color: var(--breadcrumb-fg-current); font-weight: var(--font-weight-semibold); word-break: keep-all;
}

Changelog

날짜변경
2026-07-15문서 계약(10섹션) 적용 — KRDS 벤치마킹 규격(2026-07-15) 승계, Anatomy 도해·변형·상태·콘텐츠 규칙·키보드·실코드 신설