Breadcrumb

현재 페이지의 위치를 계층 구조로 표시하는 네비게이션 컴포넌트

Basic Usage

기본적인 breadcrumb 구조입니다.

tsx

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/components">Components</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPageItem>Breadcrumb</BreadcrumbPageItem>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

With Ellipsis

긴 경로는 생략 기호로 축약할 수 있습니다.

tsx

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbEllipsis />
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/components">Components</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPageItem>Breadcrumb</BreadcrumbPageItem>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

With Custom Separator

구분자를 커스텀할 수 있습니다.

tsx

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator>/</BreadcrumbSeparator>
    <BreadcrumbItem>
      <BreadcrumbLink href="/products">Products</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator>/</BreadcrumbSeparator>
    <BreadcrumbItem>
      <BreadcrumbPageItem>Details</BreadcrumbPageItem>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Usage

tsx

import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@gpters-internal/ui';

function Example() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPageItem>Current Page</BreadcrumbPageItem>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}