breadcrumbs

Breadcrumbs navigation component <Breadcrumbs items={[ { label: "Home", href: "/" }, { label: "Products", href: "/products" }, { label: "Current Page" } ]} /> // With custom link component (e.g., Inertia Link) import { Link } from "core/link" <Breadcrumbs items={[...]} linkComponent={Link} />
items
Required
shape[ ]
Array of breadcrumb items. The last item is treated as the current page.
separator
Not required
("chevron" | "slash")
"slash"
className
Not required
string
linkComponent
Not required
elementType
"a"
Custom link component. Defaults to "a" for standard links.

Breadcrumbs display the current page location within a navigational hierarchy. They help users understand where they are and navigate back to parent pages.

Basic Usage

Separator Styles

The separator prop controls the visual separator between breadcrumb items. The default is "slash".

With Custom Link Component

When using a routing library like Inertia.js, you can pass a custom link component to enable client-side navigation:

import { Link } from "core/link"

<Breadcrumbs
  items={[
    { label: "Dashboard", href: "/dashboard" },
    { label: "Settings", href: "/settings" },
    { label: "Profile" }
  ]}
  linkComponent={Link}
/>

Behavior

  • The last item in the items array is automatically treated as the current page and rendered as non-clickable text with aria-current="page".
  • Items without an href are rendered as plain text.
  • Items with an href are rendered as clickable links with hover states.
  • The component uses proper semantic HTML with <nav> and <ol> elements for accessibility.