Breadcrumb

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

Contract

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

Installation

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

Usage

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 Reference

Breadcrumb

Root container (<nav> element).

BreadcrumbList

Ordered list of breadcrumb items.

BreadcrumbItem

List item wrapper.

BreadcrumbLink

Link to a page.

BreadcrumbPage

Current page (non-clickable).

BreadcrumbSeparator

Visual separator between items.

BreadcrumbEllipsis

Collapsed items indicator.