fix(Breadcrumb)!: BREAKING CHANGE use composition and remove cloneElement

[paanSinghCoder]

BREAKING CHANGE

Migration

• Replace as={<NextLink href="/" />} with as={NextLink} and move href (and other link props) to Breadcrumb.Item, e.g. <Breadcrumb.Item href="/" as={NextLink}>Home</Breadcrumb.Item>.

Summary

• Replaces cloneElement with a composition-style API for the as prop and ensures ref and props are passed correctly.
• Renders the current page item as a non-link for semantics and accessibility.

Changes

• as prop (breaking)
  • Before: as={<NextLink href="/" />} (React element).
  • After:as={NextLink}(component reference). Put href and other props on Breadcrumb.Item; they are passed through to the component.
  • Implementation uses <Component ref={ref} className={...} href={href} {...props}>{label}</Component> (no cloneElement). Ref is forwarded to the link or custom component (except in the dropdown path).

Current page

• When current is true, the item renders as <span aria-current="page"> instead of a link so the current page is not a clickable link.

Link content

• When there is no leading icon, link content is no longer wrapped in an extra , so the DOM is <a>Home</a> for simple items. With a leading icon, the existing span structure is kept for layout.

Type of Change

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update
• Refactor (no functional changes, no bug fixes just code improvements)
• Chore (changes to the build process or auxiliary tools and libraries such as documentation generation)
• Style (changes that do not affect the meaning of the code (white-space, formatting, etc))
• Test (adding missing tests or correcting existing tests)
• Improvement (Improvements to existing code)
• Other (please specify)

How Has This Been Tested?

[Describe the tests that you ran to verify your changes]

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation (.mdx files)
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works

Screenshots (if appropriate):

[Add screenshots here]

Related Issues

[Link any related issues here using #issue-number]

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
apsara	Ready	Preview, Comment	Mar 12, 2026 4:05am

[rohanchkrabrty]

Let's support render prop using useRender from Base UI, instead of as.
Docs - https://base-ui.com/react/utils/use-render