Breadcrumb

A navigation component that shows the current page's location within a hierarchical structure.

CMSPayload CMS Integration

Breadcrumbs can be auto-generated from page hierarchy in Payload CMS, making it easy to maintain consistent navigation across your site.

CMS Demo

See how content editors configure breadcrumbs in a CMS:

CMS FieldsEN

Breadcrumb Path (4 levels)

Current page (no link)

Breadcrumbs are typically auto-generated from page hierarchy in Payload CMS. Labels can be localized for multi-language sites.

CMS ConfigurationSimulates Payload CMS breadcrumb configuration with localization

Payload Block Example

// Auto-generate breadcrumbs from page hierarchy
export function getBreadcrumbs(page) {
  const breadcrumbs = []
  let current = page

  while (current) {
    breadcrumbs.unshift({
      label: current.title,
      href: current.slug === 'home' ? '/' : `/${current.slug}`,
    })
    current = current.parent
  }

  return breadcrumbs
}

Rendering the Breadcrumbs

import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@mordecai-design-system/ui"

export function PageBreadcrumbs({ breadcrumbs }) {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        {breadcrumbs.map((item, i) => (
          <>
            <BreadcrumbItem key={item.href}>
              {i === breadcrumbs.length - 1 ? (
                <BreadcrumbPage>{item.label}</BreadcrumbPage>
              ) : (
                <BreadcrumbLink href={item.href}>{item.label}</BreadcrumbLink>
              )}
            </BreadcrumbItem>
            {i < breadcrumbs.length - 1 && <BreadcrumbSeparator />}
          </>
        ))}
      </BreadcrumbList>
    </Breadcrumb>
  )
}

Basic Usage

BreadcrumbA navigation breadcrumb

Installation

pnpm add @corew500/ui

Usage

import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@mordecai-design-system/ui"

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Current Page</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Examples

With Ellipsis

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbEllipsis />
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/category">Category</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Current</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

With Custom Separator

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator>/</BreadcrumbSeparator>
    <BreadcrumbItem>
      <BreadcrumbPage>Current</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

With Router Link

import Link from "next/link"

<BreadcrumbLink render={<Link href="/docs" />}>
  Documentation
</BreadcrumbLink>

Sub-components

| Component | Description | |-----------|-------------| | Breadcrumb | Root nav element | | BreadcrumbList | Ordered list container | | BreadcrumbItem | Individual breadcrumb item | | BreadcrumbLink | Clickable link (non-current pages) | | BreadcrumbPage | Current page indicator | | BreadcrumbSeparator | Visual separator between items | | BreadcrumbEllipsis | Collapsed items indicator |

Props

BreadcrumbLink

Prop	Type	Default	Description
`render`	enum	—	Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.