Is the code compliant with accessibility standards?

Absolutely. It follows WCAG 2.1 AA guidelines, utilizing semantic and elements, and correct ARIA attributes like aria-label and aria-current.

What does the Breadcrumb Implementation Skill do?

It provides a comprehensive guide and reusable code patterns for implementing hierarchical navigation paths that are accessible, responsive, and follow modern design standards.

What icons can I use with this component?

The implementation is designed to work seamlessly with Lucide React icons, but it supports any React component, SVG, or string-based icon/separator.

Does this skill support mobile responsiveness?

Yes, it includes specific logic to collapse long breadcrumb paths on mobile devices, showing a truncated version like '... > Current Page' to save space.

Can I integrate this with React Router?

The skill provides patterns for standard React implementations and includes forward-looking examples for integrating with React Router's Link and useLocation components.

Accessible Breadcrumb System

Name: Accessible Breadcrumb System
Author: joaopelegrino

byjoaopelegrino

0•

Herramientas de Diseño

Implements WCAG-compliant, responsive hierarchical breadcrumb navigation for complex web applications and corporate platforms.

The Breadcrumb Implementation Skill provides a standardized framework for building accessible navigation components within React-based platforms. It ensures all implementations follow WCAG 2.1 AA standards using semantic HTML5 and ARIA patterns, while offering a mobile-responsive design that intelligently collapses long paths. This skill is ideal for developers building deep content hierarchies, such as learning management systems (LMS) or corporate dashboards, where maintaining user context and easy back-navigation is critical.

Características Principales

01WCAG 2.1 AA compliant semantic HTML5 and ARIA attribute structures

02Responsive mobile collapsing logic with customizable depth

03Reusable React components with Lucide icon and custom separator support

04Standardized accessibility features for screen readers and keyboard navigation

05Pre-configured unit and E2E testing templates for navigation flows

060 GitHub stars

Casos de Uso

01Building multi-level navigation for educational course hierarchies

02Standardizing UI/UX patterns across a corporate B2B SaaS dashboard

03Improving web accessibility compliance for existing frontend applications

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add joaopelegrino/app-controle breadcrumb-impl

For use in Claude.ai and ChatGPT

Download Skill