Breadcrumb — Hyomin Design System

Import

<link rel="stylesheet" href="/guide/css/base/index.css" />
<link rel="stylesheet" href="/guide/css/components/breadcrumb.css" />

Live

Variants

Specs

요소	Font Size	Color	비고
.breadcrumb__item	18px (body-base)	gray-800	링크, hover 시 gray-900 + underline
.breadcrumb__item--current	18px (body-base)	primary-main (green)	현재 페이지, 클릭 불가
.breadcrumb__separator	—	gray-400	CSS chevron, 6×6px

Code

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li><a class="breadcrumb__item" href="#">HOME</a></li>
    <li class="breadcrumb__separator" aria-hidden="true"></li>
    <li><a class="breadcrumb__item" href="#">카테고리</a></li>
    <li class="breadcrumb__separator" aria-hidden="true"></li>
    <li><span class="breadcrumb__item breadcrumb__item--current" aria-current="page">현재페이지</span></li>
  </ol>
</nav>

Classes

클래스	타입	설명
.breadcrumb	루트	경로 목록 래퍼 (ol 요소)
.breadcrumb__item	요소	경로 링크 — gray-800, hover 시 underline
.breadcrumb__item--current	수정자	현재 페이지 — primary-main(green), 클릭 불가
.breadcrumb__separator	요소	구분자 chevron (li 요소, aria-hidden="true")