Breadcrumbs
브레드크럼(breadcrumbs)은 탐색 계층 구조를 표시하여 사용자가 현재 위치를 파악하고 계층 구조의 수준을 이동할 수 있게 해줍니다. 브레드크럼을 통해 사용자는 탐색 중인 화면의 상위 수준 화면으로 이동할 수 있습니다.
Type
Anatomy
- 홈 : 브레드크럼의 첫번째 항목으로 메인화면으로 이동하는 링크로 작동
- 말줄임표 : 페이지 링크 표시 개수를 초과하거나 영역이 좁은 경우 축약된 경로가 있음을 안내하기 위해 제공. 홈 링크 다음 요소로 사용
- 상위 구조 : 탐색 중인 화면의 상위 수준의 정보 구조를 표시하는 텍스트로 연결 가능한 페이지가 존재하는 경우 링크로 작동 ㅤ a. 연결 가능한 페이지가 없는 경우
- 현재 탐색 중인 화면
ㅤ b. 연결 가능한 페이지가 있는 경우
State
브레드크럼 아이템의 각 상태를 나타냅니다.
홈
연결 가능한 페이지가 없는 경우
연결 가능한 페이지가 있는 경우
현재 탐색 중인 화면
Icon
브레드크럼 아이콘은 항상 일관된 위치에 제공합니다. 아이콘 변경 가능하나 아래의 예시처럼 브레드크럼의 구조를 나타내기에 적절한 아이콘으로 변경합니다.
사용 가이드
영역 맞춤
화면 너비가 충분하지 않은 경우 첫번째 경로와 마지막 경로만 표시하여 탐색 경로가 축약되어 있음을 사용자가 인지할 수 있도록 합니다.
Do
Don’t
전체 화면 링크
본문 상단에 명확한 본문 제목이 제공되고 있는 경우, 브레드크럼의 마지막 항목으로 현재 화면의 경로를 생략하고 상위 화면을 경로로 제공할 수 있습니다.
Do
Don’t
경로 표출
작업 진행 상황을 보여주기 위해 브레드크럼을 사용하지 않습니다.
Do
Don’t