Breadcrumb

Installation

Command

Manual

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

Update the import paths to match your project setup.

Usage

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 ``.

RTL

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

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	-