Breadcrumb

Playground

'use client';
import { Breadcrumb, BreadcrumbItem } from '@mbsw/ui';

export default function Demo() {
  return (
    <Breadcrumb aria-label={"현재 위치"}>
      <BreadcrumbItem
        label={"문서"}
        href={"/ko/getting-started/installation/"}
        target="_top"
      />
      <BreadcrumbItem
        label="Components"
        href={"/ko/components/"}
        target="_top"
      />
      <BreadcrumbItem label="Button" current />
    </Breadcrumb>
  );
}

Usage

현재 항목에는 current를 지정합니다. 항목 사이 구분선은 내부에서 생성됩니다. 이전 위치는 href 또는 asChild 링크로 연결합니다.

'use client';
import { Breadcrumb, BreadcrumbItem } from '@mbsw/ui';

export default function Example() {
  return (
    <Breadcrumb aria-label={"현재 위치"}>
      <BreadcrumbItem
        label={"문서"}
        href="/getting-started/installation/"
      />
      <BreadcrumbItem label="Components" href="/components/" />
      <BreadcrumbItem label="Button" current />
    </Breadcrumb>
  );
}

Playground의 Code 탭에서 현재 설정과 동작이 포함된 예제 전체를 복사할 수 있습니다. 공통 CSS 설치는 설치하기를 확인하세요.

Composition

BreadcrumbBreadcrumbItemBreadcrumbSeparator