topic★★★★★난이도

Breadcrumb

헨젤과 그레텔의 빵 부스러기에서 유래한 경로 표시.

#breadcrumb#경로#네비게이션

Breadcrumb(브레드크럼)은 그림 형제의 동화 '헨젤과 그레텔'에서 왔다. 숲 속에서 길을 잃지 않으려고 빵 부스러기(breadcrumb)를 떨어뜨리며 걸었던 것처럼, UI에서도 사용자가 '어디서 왔는지'를 추적할 수 있게 경로를 표시한다. 홈 > 카테고리 > 상품명 형태가 대표적이다.

실제 사물	UI 패턴
빵 부스러기를 따라 돌아감	경로 링크를 클릭하여 상위로 이동
지나온 길의 흔적	현재 위치까지의 계층 구조 표시
길을 잃지 않게 도와줌	사이트 구조에서 위치를 파악하게 도와줌

사용 가이드라인: 3단계 이상의 깊은 계층 구조가 있는 사이트(쇼핑몰, 문서 사이트)에 적합하다. 2단계 이하면 불필요하다. 현재 위치(마지막 항목)는 링크가 아닌 텍스트로 표시한다. 구분자는 > 또는 / 가 일반적이다. SEO에도 도움이 되므로 구조화 데이터(JSON-LD)를 함께 마크업한다.