Breadcrumb

Displays the path to the current resource using a hierarchy of links.

@react.component
let make = () =>
  <Breadcrumb>

Installation

npmyarnpnpmbun
npx shadcn@latest add @rescript-shadcn/Breadcrumb
Copy

Usage

Copy<Breadcrumb>
  <Breadcrumb.List>
    <Breadcrumb.Item>
      <Breadcrumb.Link render={<a href="/" />}> {"Home"->React.string} </Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Item>
      <Breadcrumb.Link render={<a href="/components" />}>
        {"Components"->React.string}
      </Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Item>
      <Breadcrumb.Page> {"Breadcrumb"->React.string} </Breadcrumb.Page>
    </Breadcrumb.Item>
  </Breadcrumb.List>
</Breadcrumb>

Examples

Basic

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

@react.component
let make = () =>
  <Breadcrumb>

Custom separator

Use a custom component as children for <BreadcrumbSeparator /> to create a custom separator.

@react.component
let make = () =>
  <Breadcrumb>

Dropdown

You can compose <BreadcrumbItem /> with a <DropdownMenu /> to create a dropdown in the breadcrumb.

@react.component
let make = () =>
  <Breadcrumb>

Collapsed

We provide a <BreadcrumbEllipsis /> component to show a collapsed state when the breadcrumb is too long.

@react.component
let make = () =>
  <Breadcrumb>

Link component

To use a custom link component from your routing library, you can use the render prop on <BreadcrumbLink />.

@react.component
let make = () =>
  <Breadcrumb>

API Reference

Breadcrumb

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

BreadcrumbList

The BreadcrumbList component displays the ordered list of breadcrumb items.

BreadcrumbItem

The BreadcrumbItem component wraps individual breadcrumb items.

BreadcrumbLink

The BreadcrumbLink component displays a clickable link in the breadcrumb.

BreadcrumbPage

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

BreadcrumbSeparator

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

BreadcrumbEllipsis

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