fix (breadcrumb): Dropdown item, ellipsis & separator breaks <ol> list structure

[paanSinghCoder]

Description

fix(breadcrumb): keep valid list structure when item has dropdown
Issue: With dropdownItems, BreadcrumbItem rendered <Menu> as a direct child of <ol>, so the only valid children of <ol> were violated. Similar issue were found with ellipsis and separator.
Change: Wrap the dropdown in <li className={...}> so every breadcrumb item is a list item and the DOM stays valid for assistive tech.

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?

Manual

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]

Summary by CodeRabbit

• Bug Fixes
  • Improved the rendering structure of breadcrumb dropdown items to ensure proper semantic markup and consistent styling with the rest of the breadcrumb navigation.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
apsara	Ready	Preview, Comment	Mar 11, 2026 6:28am

[coderabbitai]

📝 Walkthrough

Walkthrough

The breadcrumb-item component now wraps its dropdown Menu element within a <li> tag with combined class names when dropdownItems are provided. The non-dropdown rendering path and public API surface remain unchanged. This modifies only the DOM structure for the dropdown branch.

Changes

Cohort / File(s)	Summary
Breadcrumb Item Dropdown Rendering packages/raystack/components/breadcrumb/breadcrumb-item.tsx	Wrapped dropdown Menu in a <li> element with combined className styles. Non-dropdown path and public API unchanged. DOM structure alteration for dropdown breadcrumbs only.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 A list item wraps the breadcrumb's fall,
With styles combined, they answer the call,
No APIs bent, just structure refined,
The dropdown breadcrumb, now nested in kind! 🥕

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title accurately describes the main fix: wrapping dropdown items in to maintain valid list structure, which is the core change in the pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/breadcrumb-li-structure-breaking

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

packages/raystack/components/breadcrumb/breadcrumb-item.tsx (1)

57-75: Add a regression test for the dropdown branch.

This path was only manually tested, and this DOM-shape bug is easy to reintroduce. A test that renders Breadcrumb.Item with dropdownItems and asserts the direct child under the breadcrumb <ol> is an <li> would lock the fix in.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/raystack/components/breadcrumb/breadcrumb-item.tsx` around lines 57
- 75, Add a regression test for the dropdown branch of the Breadcrumb.Item
component: render Breadcrumb with a Breadcrumb.Item that has dropdownItems (the
same shape used in breadcrumb-item.tsx Menu/Dropdown branch) and assert that the
direct child under the rendered breadcrumb <ol> is an <li> (i.e., the presence
of an <li> wrapper instead of the dropdown content becoming the direct child).
Place the test alongside existing breadcrumb tests (using the same testing
setup, e.g., react-testing-library + jest), render the component, query the <ol>
element, and assert its firstElementChild.tagName === 'LI' to lock the DOM-shape
fix for Breadcrumb.Item/Menu.Trigger/Menu.Content.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@packages/raystack/components/breadcrumb/breadcrumb-item.tsx`:
- Around line 57-75: Add a regression test for the dropdown branch of the
Breadcrumb.Item component: render Breadcrumb with a Breadcrumb.Item that has
dropdownItems (the same shape used in breadcrumb-item.tsx Menu/Dropdown branch)
and assert that the direct child under the rendered breadcrumb <ol> is an <li>
(i.e., the presence of an <li> wrapper instead of the dropdown content becoming
the direct child). Place the test alongside existing breadcrumb tests (using the
same testing setup, e.g., react-testing-library + jest), render the component,
query the <ol> element, and assert its firstElementChild.tagName === 'LI' to
lock the DOM-shape fix for Breadcrumb.Item/Menu.Trigger/Menu.Content.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 6f1266a7-2c5f-49de-adce-bed3de7ca728

📥 Commits

Reviewing files that changed from the base of the PR and between 14de0ba and f9fbc51.

📒 Files selected for processing (1)

• packages/raystack/components/breadcrumb/breadcrumb-item.tsx