skills.rest
TechsioCZ
TechsioCZOFFICIAL
Explore all skills by this author →
GitHub

breadcrumb-usage

Render accessible breadcrumb navigation in Next.js/React apps with the UI kit.

2|Updated Dec 2, 2024
Search Tags:#accessibility#react#navigation#composition#breadcrumb#ui-kit#framework-adapter
One-click install
npx skills add https://github.com/TechsioCZ/new-engine --skill breadcrumb-usage
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: breadcrumb-usage
Source: https://github.com/TechsioCZ/new-engine/tree/main/libs/ui/skills/breadcrumb-usage
Command: npx skills add https://github.com/TechsioCZ/new-engine --skill breadcrumb-usage

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides accessible breadcrumb navigation for web apps using the UI kit, helping users understand their location within a page hierarchy and improving UX.

Core Features & Use Cases

  • Composable Breadcrumb components (Breadcrumb.List, Breadcrumb.Item, Breadcrumb.Link, Breadcrumb.CurrentLink, Breadcrumb.Separator) for consistent navigation across pages.
  • Supports framework adapters (e.g., NextLink) to integrate with Next.js and other frameworks.
  • Improves accessibility with proper ARIA roles and current-page semantics for screen readers.

Quick Start

Create a Breadcrumb with List, Item, Link, CurrentLink, and Separator to render a page hierarchy.

Frequently Asked Questions about breadcrumb-usage

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add accessible breadcrumbs to a React application?▼

Breadcrumbs for React are built using composable components like Breadcrumb.List, Item, and Link, which provide proper ARIA roles and current-page semantics for screen readers. This ensures users understand their location within a page hierarchy.

Can I use breadcrumb navigation with Next.js framework adapters?▼

Breadcrumb navigation supports framework adapters like NextLink to integrate seamlessly with Next.js. This allows consistent hierarchical navigation across dashboards and product catalogs while maintaining routing compatibility.

What is the best way to structure hierarchical page navigation in a web app?▼

Hierarchical page navigation is structured using composable Breadcrumb components with List, Item, Link, CurrentLink, and Separator. This pattern provides consistent navigation across pages and indicates the current page state.

Do I need ARIA roles for breadcrumb accessibility in web apps?▼

ARIA roles are required for breadcrumb accessibility to convey current-page semantics to screen readers. The composable Breadcrumb components handle this automatically, ensuring assistive technology users understand their location within the content hierarchy.

How do I build a breadcrumb component for a product catalog hierarchy?▼

Build a breadcrumb component for a product catalog by composing Breadcrumb.List, Item, Link, and Separator elements to render the page hierarchy. This provides clear, accessible navigation paths that help users traverse category levels.

Related Skills

Explore More Software Engineering Skills→
TimeKastTimeKast

ui

Generate accessible React/Next.js UI components with Server Components and Tailwind styling.

Official
Intermediate
Legal-and-GeneralLegal-and-General
23

canopy-breadcrumb

Implement Canopy lg-breadcrumb navigation in Angular projects.

Official
Intermediate
CANTAGESTUDIOCANTAGESTUDIO
3

ux-information-architecture

Design information architecture as ASCII diagrams for applications and websites.

Community
Intermediate
FEMADOXFEMADOX
4

vercel-composition-patterns

Replace boolean props with composable React component patterns.

Community
Advanced