Breadcrumb

1. Home
2. /
3. Docs
4. /
5. Components

계약

Overview

Machine-readable contract from Component Spec.

component: breadcrumbexport: Breadcrumbversion: 1attributes: data-refineui=breadcrumb

Anatomy

Part	data-refineui
root	breadcrumb
ellipsis	breadcrumb-ellipsis
link	breadcrumb-link
page	breadcrumb-page

States

Scope	Category	Values
component	pseudo	focus-visible
component	environment	forced-colors, dir

Accessibility

Slot	Element	Role
breadcrumb-page	div	link

Focus

Section	Property	Value
visual	required	true
visual	selector	:focus-visible

Layout

Property	Value
direction	logical
rtl	true

설치

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

사용법

import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
  BreadcrumbEllipsis
} from "@refineui/react";

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Components</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbEllipsis />
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Current</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

API 레퍼런스

Breadcrumb

루트 컨테이너(<nav> 요소).

BreadcrumbList

브레드크럼 항목의 순서 목록.

BreadcrumbItem

리스트 항목 래퍼.

BreadcrumbLink

페이지 링크.

BreadcrumbPage

현재 페이지(클릭 불가).

BreadcrumbSeparator

항목 사이 시각적 구분선.

BreadcrumbEllipsis

접힌 항목 표시기.