# 面包屑 · JGuang UI

> 展示当前页面在层级结构中的位置。

- 页面: https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/breadcrumb
- 改编自: shadcn/ui 文档 (MIT) @ bc0705384b51252af26dcc65425b216bf5eb063c
- 说明：正文保留英文原文。

> 示例 `breadcrumb-demo`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/breadcrumb


## Installation


  

**Command**


  

**Manual**


```text
Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.
```


### Copy and paste the following code into your project.


[View complete source: components/ui/breadcrumb.tsx](/r/jguang-ui/radix/breadcrumb.json)


### Update the import paths to match your project setup.


## Usage

```tsx showLineNumbers
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
```

```tsx showLineNumbers
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/components">Components</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>
```

## Composition

Use the following composition to build a `Breadcrumb`:

```text
Breadcrumb
└── BreadcrumbList
    ├── BreadcrumbItem
    │   └── BreadcrumbLink
    ├── BreadcrumbSeparator
    ├── BreadcrumbItem
    │   └── BreadcrumbLink
    ├── BreadcrumbSeparator
    └── BreadcrumbItem
        └── BreadcrumbPage
```

## Basic

A basic breadcrumb with a home link and a components link.


> 示例 `breadcrumb-basic`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/breadcrumb


## Custom separator

Use a custom component as `children` for `` to create a custom separator.


> 示例 `breadcrumb-separator`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/breadcrumb


## Dropdown

You can compose `` with a `` to create a dropdown in the breadcrumb.


> 示例 `breadcrumb-dropdown`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/breadcrumb


## Collapsed

We provide a `` component to show a collapsed state when the breadcrumb is too long.


> 示例 `breadcrumb-ellipsis`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/breadcrumb


## Link component

To use a custom link component from your routing library, you can use the `asChild` prop on ``.


> 示例 `breadcrumb-link`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/breadcrumb


## RTL

To enable RTL support in JGuang UI, see the [RTL configuration guide](/systems/jguang-ui/docs/rtl).


> 示例 `breadcrumb-rtl`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/breadcrumb


## API Reference

### Breadcrumb

The `Breadcrumb` component is the root navigation element that wraps all breadcrumb components.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` | -       |

### BreadcrumbList

The `BreadcrumbList` component displays the ordered list of breadcrumb items.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` | -       |

### BreadcrumbItem

The `BreadcrumbItem` component wraps individual breadcrumb items.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` | -       |

### BreadcrumbLink

The `BreadcrumbLink` component displays a clickable link in the breadcrumb.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` | -       |

### BreadcrumbPage

The `BreadcrumbPage` component displays the current page in the breadcrumb (non-clickable).

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` | -       |

### BreadcrumbSeparator

The `BreadcrumbSeparator` component displays a separator between breadcrumb items. You can pass custom children to override the default separator icon.

| Prop        | Type              | Default |
| ----------- | ----------------- | ------- |
| `children`  | `React.ReactNode` | -       |
| `className` | `string`          | -       |

### BreadcrumbEllipsis

The `BreadcrumbEllipsis` component displays an ellipsis indicator for collapsed breadcrumb items.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` | -       |

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt