Skip to Content
FrontendBundlesComponentsUI PrimitivesBreadcrumb

Breadcrumb

Accessible navigation breadcrumb built on Radix UI Slot. Use BreadcrumbCustom for automatic route-driven breadcrumbs in the app shell.

Import

import {
  Breadcrumb, BreadcrumbList, BreadcrumbItem,
  BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis,
} from "@phpcreation/frontend-components-react-nextjs-bundle/components/Breadcrumb";

Sub-components

ComponentDescription
BreadcrumbRoot <nav> with aria-label="breadcrumb"
BreadcrumbList<ol> list container
BreadcrumbItem<li> item
BreadcrumbLinkClickable link (previous pages)
BreadcrumbPageCurrent page label (non-clickable)
BreadcrumbSeparator/ separator between items
BreadcrumbEllipsis… for collapsed middle items

Usage

import {
  Breadcrumb, BreadcrumbList, BreadcrumbItem,
  BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator,
} from "...";
 
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/invoices">Invoices</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Invoice #1024</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>
Last updated on
CommandForm (RHF)