面包屑

安装

Command

Manual

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

将以下代码复制到你的项目中。

View complete source: components/ui/breadcrumb.tsx

根据项目配置更新导入路径。

用法

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

<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:

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

Basic

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

Custom separator

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

Dropdown

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

Collapsed

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

Link component

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

从右到左布局

To enable RTL support in JGuang UI, see the RTL configuration guide.

API 参考

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	-