본문으로 건너뛰기

Breadcrumb

MSK Breadcrumb는 현재 위치의 경로를 보여주는 CSS 전용 primitive입니다. JS 모듈은 없으며 .msk-ui-breadcrumb 스타일만 사용합니다.

Preview

Data API

<nav class="msk-ui-breadcrumb" aria-label="Breadcrumb">
  <ol>
    <li><a href="/">홈</a></li>
    <li><a href="/docs">문서</a></li>
    <li aria-current="page">UI Kit</li>
  </ol>
</nav>

Accessibility

<nav aria-label="Breadcrumb"> + 순서 목록(<ol>)으로 경로 순서를 전달합니다.
마지막(현재) 항목은 링크 대신 aria-current="page"로 표시합니다.
구분자(/)는 ::before로 그려지므로 마크업에 포함하지 않습니다.

Preview
Data API
Accessibility