syidaxdesign system
홈 가격 내 정보
Components탐색

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로 구성하세요.

  1. 상위 경로부터 나열

    가장 상위 화면에서 현재 화면 순서로 항목을 배치합니다.

  2. 현재 위치 표시

    현재 항목에 active를 지정하세요. 마지막 구분자는 자동으로 숨겨집니다. 이동할 수 없는 항목은 disabled로 표시합니다.

  3. 실제 이동 연결

    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>

API reference

#

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

<sy-breadcrumb>

Properties

Attribute / PropertyTypeDefaultDescription
'slash' | 'arrow''slash'경로 사이의 구분자입니다.

Slots

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

<sy-breadcrumb-item>

Properties

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

Events

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

Methods

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

Slots

SlotDescription
컴포넌트의 본문 또는 자식 항목입니다.
Design SystemTab 이동 Enter 열기