7onicDESIGN SYSTEM

Breadcrumb

Breadcrumb는 사이트 내 현재 위치를 계층적으로 표시하는 내비게이션 컴포넌트입니다. 사용자가 상위 페이지로 빠르게 돌아갈 수 있도록 합니다.

3
Sizes
6
Parts
Collapse
Auto Collapse
Pure
React

Playground

Preview
D
Size
Separator
Items
<Breadcrumb>
  <Breadcrumb.List>
    <Breadcrumb.Item>
      <Breadcrumb.Link href="#">Home</Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Item>
      <Breadcrumb.Link href="#">Products</Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Item>
      <Breadcrumb.Page>Category</Breadcrumb.Page>
    </Breadcrumb.Item>
  </Breadcrumb.List>
</Breadcrumb>

Sizes

sm
폰트12px
아이콘14px
Gap6px
default
폰트13px
아이콘14px
Gap8px
lg
폰트14px
아이콘16px
Gap8px

Features

Auto Collapse

maxItems로 긴 경로를 자동 생략하고, itemsBeforeCollapse / itemsAfterCollapse로 표시 수를 제어합니다

<Breadcrumb>
  <Breadcrumb.List>
    <Breadcrumb.Item>
      <Breadcrumb.Link href="#">Home</Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Item>
      <Breadcrumb.Ellipsis />
    </Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Item>
      <Breadcrumb.Page>Current Page</Breadcrumb.Page>
    </Breadcrumb.Item>
  </Breadcrumb.List>
</Breadcrumb>

Custom Separator

임의의 ReactNode를 구분자로 사용할 수 있습니다. 슬래시, 점 등 자유롭게 변경 가능합니다

<Breadcrumb separator={<span className="text-text-subtle">/</span>}>
  <Breadcrumb.List>
    <Breadcrumb.Item>
      <Breadcrumb.Link href="#">Home</Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Item>
      <Breadcrumb.Link href="#">Products</Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Item>
      <Breadcrumb.Page>Detail</Breadcrumb.Page>
    </Breadcrumb.Item>
  </Breadcrumb.List>
</Breadcrumb>

Custom Link (asChild)

asChild로 Next.js Link 등 커스텀 링크를 합성합니다. 스타일은 자동으로 상속됩니다

import Link from 'next/link'

<Breadcrumb>
  <Breadcrumb.List>
    <Breadcrumb.Item>
      <Breadcrumb.Link asChild>
        <Link href="/home">Home</Link>
      </Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Item>
      <Breadcrumb.Link asChild>
        <Link href="/products">Products</Link>
      </Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Item>
      <Breadcrumb.Page>Detail</Breadcrumb.Page>
    </Breadcrumb.Item>
  </Breadcrumb.List>
</Breadcrumb>

API

Component Structure

Breadcrumb— Radix Slot
.List.Item.LinkProps.Page.Separator.Ellipsis

Props

Breadcrumb

separatorChevronRight icon
ReactNode

항목 사이의 구분자 요소

size"default"
"sm" | "default" | "lg"

Breadcrumb 사이즈

maxItemsundefined
number

접기 전 최대 항목 수

itemsBeforeCollapseundefined
number

생략 기호 앞에 표시할 항목 수

itemsAfterCollapseundefined
number

생략 기호 뒤에 표시할 항목 수

Breadcrumb.Link

asChildfalse
boolean

커스텀 링크 컴포넌트와 합성 (Radix Slot)

hrefundefined
string

링크 대상 URL

Anatomy

1
2
3
4
Home
6
/
Components
/
5
Breadcrumb
Fonttext-sm
Gapgap-2
Iconicon-xs
1
Root
nav 컨테이너
2
List
ol 리스트
3
Item
각 경로 항목
4
Link
클릭 가능한 링크
5
Current
현재 페이지
6
Separator
구분 문자

Best Practices

✓

권장

  • ✓사이트의 계층 구조를 정확하게 반영합니다
  • ✓현재 페이지를 마지막 항목으로 표시합니다
  • ✓긴 경로에는 collapse를 사용해 생략합니다
  • ✓페이지 상단의 눈에 잘 띄는 위치에 배치합니다
✕

지양

  • ✗현재 페이지를 링크로 만들지 않습니다. Breadcrumb.Page를 사용합니다.
  • ✗사이트 계층과 무관한 항목을 포함하지 않습니다
  • ✗1단계만 있는 Breadcrumb은 사용하지 않습니다. 의미가 없습니다.
  • ✗메인 내비게이션의 대용으로 사용하지 않습니다

Accessibility

시맨틱 구조

Breadcrumb는 <nav> 요소로 감싸여 있으며, 내부는 순서 있는 목록인 <ol>으로 구조화됩니다. 스크린 리더가 내비게이션 계층을 올바르게 읽습니다.

ARIA / WCAG

  • aria-label="breadcrumb" nav 요소에 설정
  • aria-current="page" 현재 페이지에 설정
  • aria-hidden="true" 구분자에 설정
  • WAI-ARIA Breadcrumb Pattern 준수