feat: Add React Breadcrumb Trail with Animated Chevron Dividers (#28029)

[realtushartyagi]

Pull Request Description

Adds a new React Component: Breadcrumb Trail with Animated Chevron Dividers.
This submission provides a highly semantic, copy-paste ready React component that renders a navigation breadcrumb trail. It strictly adheres to accessibility standards utilizing <nav aria-label> and <ol> structures while intelligently tagging the active leaf node with aria-current="page". Visually, it leverages advanced CSS combinators (the + adjacent sibling selector) to bind the hover state of the anchor link to the immediately following SVG chevron divider. This triggers a smooth, hardware-accelerated "slide forward" animation on the chevron whenever the user hovers over a link, providing immediate tactile feedback without requiring heavy JavaScript event listeners.

Fixes #28029
Fixes #27361

---

Type of Change

• ✨ New animation / hover effect
• 🧩 New component
• 📝 Documentation improvement
• 🐛 Bug fix in an existing submission
• Other (describe below)

---

Submission Checklist

⚠️ PRs that fail this checklist will be closed without review.

• All changes are inside submissions/react/react-breadcrumb-trail-with-animated-chevron-dividers-realtushartyagi-28029/
• Includes demo.html — (N/A: React Component Submission)
• Includes style.css — (N/A: Uses component-scoped .css instead)
• Includes README.md — what it does, how to use it, why it fits EaseMotion CSS
• No changes to core/
• No changes to components/
• One feature per PR (no bundled unrelated changes)

---

Feature Description

What does this add?

A React-powered semantic breadcrumb navigation block that utilizes the CSS adjacent sibling selector (+) to trigger a forward-sliding animation on chevron dividers when the preceding link is hovered.

How does a developer use it?

import React from 'react';
import BreadcrumbTrail from './components/BreadcrumbTrail';

const App = () => {
  const shopTrail = [
    { label: 'Home', href: '/' },
    { label: 'Categories', href: '/categories' },
    { label: 'Sneakers', href: '/categories/sneakers' },
    { label: 'Nike Air Max 90', href: '#' } // Active node
  ];

  return (
    <div style={{ padding: '2rem' }}>
      <BreadcrumbTrail 
        items={shopTrail} 
        ariaLabel="Product Catalog Navigation" 
      />
    </div>
  );
};

export default App;

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[SAPTARSHI-coder]

✅ React/SCSS Submission Validated!

Great work @realtushartyagi! 🎉 Your react submission passed all quality checks.

⚛️ Folder: submissions/react/react-breadcrumb-trail-with-animated-chevron-dividers-realtushartyagi-28029

• ✅ React component file (.jsx/.tsx)
• ✅ README.md
• ✅ CSS/SCSS stylesheet

🚀 What happens next?

• A maintainer will review your React component
• Respond promptly to any feedback
• Once approved, it will be merged into main!

Thank you for contributing to EaseMotion CSS! ⚡

[SAPTARSHI-coder]

🔒 Pull Request Closed: Stale/Duplicate Submission 🔒

Hi @realtushartyagi! 👋

This pull request has been closed because the linked issue (#28029) is already resolved and closed. Another contributor's pull request was accepted and merged for this task first. Thank you for your contribution!

[SAPTARSHI-coder]

✅ React/SCSS Submission Validated!

Great work @realtushartyagi! 🎉 Your react submission passed all quality checks.

⚛️ Folder: submissions/react/react-breadcrumb-trail-with-animated-chevron-dividers-realtushartyagi-28029

• ✅ React component file (.jsx/.tsx)
• ✅ README.md
• ✅ CSS/SCSS stylesheet

🚀 What happens next?

• A maintainer will review your React component
• Respond promptly to any feedback
• Once approved, it will be merged into main!

Thank you for contributing to EaseMotion CSS! ⚡