Breadcrumb

Source: packages/shared/components/ui/breadcrumb.tsx

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

Preview

Sub-components

Component	Element	Description
`Breadcrumb`	`<nav>`	Root with `aria-label="breadcrumb"`
`BreadcrumbList`	`<ol>`	Ordered list container
`BreadcrumbItem`	`<li>`	Individual crumb
`BreadcrumbLink`	`<a>`	Clickable crumb link
`BreadcrumbPage`	`<span>`	Current page (non-clickable, `aria-current="page"`)
`BreadcrumbSeparator`	`<li>`	Separator (chevron icon)
`BreadcrumbEllipsis`	`<span>`	Overflow indicator (ellipsis icon)

Usage Example

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/jobs">Jobs</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Software Engineer</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Used In

Admin: JobDetailPage (navigation back to job list)

Notes

Override in Admin JobDetailPage: className="mb-6" adds bottom margin to space the breadcrumb from the page content below.
Sub-components (BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator) are used with default styling — no overrides.