본문으로 건너뛰기

BreadCrumb

브레드크럼(Breadcrumb)은 사용자가 웹사이트 내에서 현재 위치를 파악하고, 이전 페이지로 쉽게 이동할 수 있도록 돕는 네비게이션 컴포넌트입니다.
주로 계층적 구조를 가진 웹사이트에서 사용자의 현재 위치를 표시하고, 상위 페이지로의 탐색을 용이하게 합니다.

인터랙티브 예제​

아래 컨트롤을 사용하여 BreadCrumb 컴포넌트의 동작을 직접 테스트해볼 수 있습니다.

itemsarray
브레드크럼에 표시할 항목들의 배열입니다.
itemobject
아이템 편집
hrefstring
labelstring
itemobject
아이템 편집
hrefstring
labelstring
itemobject
아이템 편집
hrefstring
labelstring
classNamestring
추가 CSS 클래스를 지정합니다.

기본 사용법​

import { BreadCrumb } from '@ncds/ui-admin';

function App() {
  const items = [
    { href: '/', label: '홈' },
    { href: '/category', label: '카테고리' },
    { href: '/category/subcategory', label: '서브카테고리' },
    { label: '현재 페이지' },
  ];

  return <BreadCrumb items={items} />;
}

Props​

PropTypeDefaultDescription
itemsBreadcrumbItemProps[]-브레드크럼에 표시할 항목들의 배열입니다. 첫 번째 항목은 항상 홈 아이콘으로 표시됩니다.
classNamestring-브레드크럼 컴포넌트의 루트 요소에 추가할 클래스명입니다.
PropTypeDefaultDescription
hrefstring-항목의 링크 URL입니다. 마지막 항목(현재 페이지)에는 제공하지 않습니다.
labelstring-항목에 표시할 텍스트입니다. 첫 번째 항목은 label 값과 관계없이 항상 홈 아이콘으로 표시됩니다.

상세 예제 (Detailed Examples)​

기본 구조​

브레드크럼은 첫 번째 항목이 항상 홈 아이콘으로 표시되며, 사용자가 제공한 items 배열의 나머지 항목들이 순서대로 표시됩니다. 각 항목 사이에는 구분자(separator)가 자동으로 추가됩니다.

다른 홈 경로 사용하기​

첫 번째 항목의 href 속성을 수정하여 홈 아이콘의 경로를 변경할 수 있습니다.

사용자 정의 스타일링​

className prop을 사용하여 브레드크럼 컴포넌트에 추가 스타일을 적용할 수 있습니다.