브레드크럼은 사용자의 현재 위치와 계층을 알려주는 네비게이션 구성요소입니다.
Usage
브레드크럼은 사용자가 사이트 내에서 길을 잃지 않도록 해주는 네비게이션 역할을 하며 다른 요소로 대체할 수 없습니다. 메인 페이지 및 특정한 작업을 수행하는 예외적인 페이지를 제외하고 모든 페이지에서 사용하는 것을 원칙으로 합니다.
•
상위 계층에서 하위 계층까지 한 단계씩 계층적 진행 경로를 표시합니다.
•
각 항목은 해당 페이지로의 링크를 적용합니다.
•
메인 페이지에서 시작하여 최대 4depth 페이지까지 표시합니다.
Anatomy
1.
브레드크럼은 항상 메인에서 시작합니다. 클릭 시 메인 페이지로 이동합니다.
2.
이전 경로의 페이지명을 표시합니다. 클릭 시 각 페이지로 이동합니다.
3.
현재 페이지명을 표시합니다. 링크는 사용하지 않습니다.
4.
현재 페이지가 여러 단계의 섹션으로 구분된 경우, 해당 섹션명을 함께 표시하여 사용할 수 있습니다.
Guidelines
보편적인 브레드크럼의 형태와 기능으로 사용합니다.
•
화면 좌측 상단, 글로벌 네비게이션 바 하단에 배치합니다.
•
메인 페이지를 제외하고 1depth 페이지부터 최대 4depth 페이지까지 표시합니다.
•
주문, 기술협업 등 특정 작업을 수행하기 위해 고유의 레이아웃으로 구성된 페이지에서는 사용하지 않습니다.
•
각 경로간 표시는 > 기호를 사용하는 것을 원칙으로 합니다.
•
중단점 1,024px 이하 해상도에서는 숨김 처리합니다.
•
페이지의 다른 요소와 비교하여 시각적인 존재감이 두드러지지 않도록 디자인합니다.
Accessibility
다음의 접근성 지침을 따라 사용합니다.
•
스크린 리더의 정확한 판독을 위해 브레드크럼 항목은 해당 페이지명을 동일하게 반영해야 합니다.
•
WAI ARIA APG에 따라 aria-lable을 적용하여 사용합니다.
