Breadcrumb

현재 위치와 상위 경로를 간결하게 보여줍니다.

<sy-breadcrumb>설치 안내 기본 사용법

Live preview

컴포넌트를 조작하면 여기에 결과가 표시됩니다.

구분자

중간 경로 비활성화

코드 보기

HTML

<sy-breadcrumb separator="slash">
  <sy-breadcrumb-item>홈</sy-breadcrumb-item>
  <sy-breadcrumb-item>프로젝트</sy-breadcrumb-item>
  <sy-breadcrumb-item active>Design System</sy-breadcrumb-item>
</sy-breadcrumb>

사용 가이드

현재 화면이 어떤 상위 경로에 속하는지 보여줍니다. 전체 메뉴는 Navigation, 같은 영역의 전환은 Tabs로 구성하세요.

상위 경로부터 나열
가장 상위 화면에서 현재 화면 순서로 항목을 배치합니다.
현재 위치 표시
현재 항목에 active를 지정하세요. 마지막 구분자는 자동으로 숨겨집니다. 이동할 수 없는 항목은 disabled로 표시합니다.
실제 이동 연결
selected.detail로 전달되는 항목 요소를 확인해 앱의 라우터에서 화면을 이동하세요.

예제

현재 위치

상위 경로는 선택할 수 있으며 현재 페이지는 active로 구분합니다.

코드 보기

HTML

<sy-breadcrumb>
  <sy-breadcrumb-item>홈</sy-breadcrumb-item>
  <sy-breadcrumb-item>프로젝트</sy-breadcrumb-item>
  <sy-breadcrumb-item active>Design System</sy-breadcrumb-item>
</sy-breadcrumb>

구분자

slash와 arrow 중 경로의 표현에 맞는 스타일을 선택하세요.

코드 보기

HTML

<div style="display:grid;gap:16px;width:100%">
  <sy-breadcrumb>
    <sy-breadcrumb-item>홈</sy-breadcrumb-item>
    <sy-breadcrumb-item>프로젝트</sy-breadcrumb-item>
    <sy-breadcrumb-item active>Design System</sy-breadcrumb-item>
  </sy-breadcrumb>
  <sy-breadcrumb separator="arrow">
    <sy-breadcrumb-item>홈</sy-breadcrumb-item>
    <sy-breadcrumb-item>프로젝트</sy-breadcrumb-item>
    <sy-breadcrumb-item active>Design System</sy-breadcrumb-item>
  </sy-breadcrumb>
</div>

접근할 수 없는 경로

중간 경로를 비활성화해도 현재 위치의 계층은 유지됩니다.

코드 보기

HTML

<sy-breadcrumb separator="arrow">
  <sy-breadcrumb-item>홈</sy-breadcrumb-item>
  <sy-breadcrumb-item disabled>프로젝트</sy-breadcrumb-item>
  <sy-breadcrumb-item active>Design System</sy-breadcrumb-item>
</sy-breadcrumb>

항목별 구분자

특정 항목에 separator를 지정하면 부모의 설정보다 우선합니다.

코드 보기

HTML

<sy-breadcrumb separator="slash">
  <sy-breadcrumb-item>홈</sy-breadcrumb-item>
  <sy-breadcrumb-item separator="arrow">프로젝트</sy-breadcrumb-item>
  <sy-breadcrumb-item active>Design System</sy-breadcrumb-item>
</sy-breadcrumb>

이벤트와 전달 값

컴포넌트를 조작하고 최근 이벤트의 이름과 detail 값을 확인하세요. 코드에는 이 컴포넌트와 하위 구성 요소가 보내는 이벤트의 구독 방법이 모두 포함되어 있습니다.

코드 보기

HTML

<sy-breadcrumb separator="slash">
  <sy-breadcrumb-item>홈</sy-breadcrumb-item>
  <sy-breadcrumb-item>프로젝트</sy-breadcrumb-item>
  <sy-breadcrumb-item active>Design System</sy-breadcrumb-item>
</sy-breadcrumb>
<output id="demo-events" aria-live="polite">컴포넌트를 조작하면 최근 이벤트와 전달 값이 표시됩니다.
</output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? '완료';
  for (const name of ["selected"]) {
    document.addEventListener(name, event => {
      document.querySelector('#demo-events').textContent =
        `${event.target.localName} · ${name}: ${describeResult(event.detail)}`;
    });
  }
</script>

짧은 탐색 경로

두 단계 경로를 화살표로 구분하고 현재 페이지를 활성 상태로 표시합니다.

코드 보기

HTML

<sy-breadcrumb separator="arrow">
  <sy-breadcrumb-item>홈</sy-breadcrumb-item>
  <sy-breadcrumb-item active>Design System</sy-breadcrumb-item>
</sy-breadcrumb>

기능별 예제

8개 주제에서 필요한 기능을 선택하세요. 속성 설정, 메서드 호출, 이벤트 결과와 슬롯 구성을 실행 화면과 코드로 확인할 수 있습니다.

기능 찾기

사용 예제 · Overview

선택한 예제를 직접 조작해 보세요. 여러 구성이 있는 주제는 세부 예제를 바꿀 수 있습니다.

코드 보기

HTML

예제를 불러오고 있습니다.

사용 예제 · 짧은 탐색 경로

두 단계 경로를 화살표로 구분하고 현재 페이지를 활성 상태로 표시합니다.

코드 보기

HTML

<sy-breadcrumb separator="arrow">
  <sy-breadcrumb-item>홈</sy-breadcrumb-item>
  <sy-breadcrumb-item active>Design System</sy-breadcrumb-item>
</sy-breadcrumb>

API reference

이름에 마우스를 올리거나 키보드로 선택하면 적용 코드를 확인할 수 있습니다. 터치 화면에서는 이름을 누르세요.

`<sy-breadcrumb>`

Properties

Attribute / Property	Type	Default	Description
	`'slash' \| 'arrow'`	`'slash'`	경로 사이의 구분자입니다.

Slots

Slot	Description
	컴포넌트의 본문 또는 자식 항목입니다.

`<sy-breadcrumb-item>`

Properties

Type	Default	Description
`boolean`	`false`	현재 페이지임을 표시하며 선택을 막습니다.
`boolean`	`false`	사용자 조작과 키보드 포커스를 차단합니다.
`'slash' \| 'arrow'`	`undefined`	경로 사이의 구분자입니다.
`'slash' \| 'arrow'`	`'slash'`	Set by the parent `sy-breadcrumb` to inherit its separator.
`boolean`	`false`	Set by the parent `sy-breadcrumb`. When true, no trailing separator is rendered.

Events

Event	Detail	Description
	`CustomEvent<HTMLSyBreadcrumbItemElement>`	사용자가 항목을 선택했을 때 발생합니다.

Methods

Method	Returns	Description
	`Promise<void>`	현재 속성으로 컴포넌트를 다시 렌더링합니다. 일반 사용에서는 속성 변경이나 부모 컴포넌트가 갱신을 관리합니다.

Slots

Slot	Description
	컴포넌트의 본문 또는 자식 항목입니다.

Breadcrumb

사용 가이드

상위 경로부터 나열

현재 위치 표시

실제 이동 연결

예제

현재 위치

구분자

접근할 수 없는 경로

항목별 구분자

이벤트와 전달 값

짧은 탐색 경로

기능별 예제

사용 예제 · Overview

속성 · Item Active

속성 · Item Disabled

속성 · Item Separator

속성 · Separator

이벤트 · Item Selected

이벤트 · Selected

사용 예제 · 짧은 탐색 경로

API reference

<sy-breadcrumb>

Properties

Slots

<sy-breadcrumb-item>

Properties

Events

Methods

Slots

`<sy-breadcrumb>`

`<sy-breadcrumb-item>`