Faber UI
Components

Breadcrumb

A navigation trail showing the user's location in the app.

Breadcrumb renders a navigation trail that shows the path to the current page, with separators between items.

Installation

Terminal
pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/breadcrumb.json

Usage

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

export default function Example() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Current</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

Examples

Default

With ellipsis

API

Each part forwards every prop of what it is built on, including className and render where Base UI supports it. The props column lists only what Faber UI adds on top.

PartBuilt onProps
Breadcrumbdata-slot="breadcrumb"<nav>HTML—
BreadcrumbListdata-slot="breadcrumb-list"<ol>HTML—
BreadcrumbItemdata-slot="breadcrumb-item"<li>HTML—
BreadcrumbPagedata-slot="breadcrumb-page"<span>HTML—
BreadcrumbSeparatordata-slot="breadcrumb-separator"<li>HTML—
BreadcrumbEllipsisdata-slot="breadcrumb-ellipsis"<span>HTML—

Changelog

  1. v0.3.0BreadcrumbEllipsis and PaginationEllipsis expose their "More" labels to screen readers.patch
Full Breadcrumb history

Last updated on

On this page