Menus & Navigation

Breadcrumb

Server Component

Hierarchical page trail.

Import

tsx

import { Breadcrumb } from "@cronus-ui/ui";

bash

npx cronus-ui add breadcrumb

Examples

Trail

Shows the path to the current page, with the active page as plain text.

tsx

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="#">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="#">Components</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Button</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component BreadcrumbDefault layout:inline style:breadcrumb {
  label "default"
  text "Home"
  text "Components"
  text "Button"
}

page "/audit/breadcrumb/default" type:custom {
  use BreadcrumbDefault
}

API Reference

Generated from the component's exported types.

BreadcrumbLinkProps

Extends AnchorHTMLAttributes<HTMLAnchorElement>

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render as the child element via Slot.
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

BreadcrumbProps

Extends HTMLAttributes<HTMLElement>

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

BreadcrumbListProps

Extends OlHTMLAttributes<HTMLOListElement>

Prop	Type	Default	Description
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.
`start`	`number`	—	—

BreadcrumbItemProps

Extends LiHTMLAttributes<HTMLLIElement>

Prop	Type	Default	Description
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

BreadcrumbPageProps

Extends HTMLAttributes<HTMLSpanElement>

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

BreadcrumbSeparatorProps

Extends LiHTMLAttributes<HTMLLIElement>

Prop	Type	Default	Description
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

BreadcrumbEllipsisProps

Extends HTMLAttributes<HTMLSpanElement>

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.