Breadcrumb Component Example

Two-Level Breadcrumb Example

This shows a simple breadcrumb trail: Home > Features (current page)

Three-Level Breadcrumb Example

This shows a deeper breadcrumb trail: Home > Citizen Intelligence Agency > Features (current page)

Four-Level Breadcrumb Example

This shows an even deeper breadcrumb trail with four levels of navigation hierarchy.

Accessibility Features

• Semantic HTML: Uses <nav> with aria-label="Breadcrumb" and <ol> list structure
• ARIA Attributes: Current page marked with aria-current="page"
• Keyboard Navigation: All links are tab-accessible with visible focus indicators
• Screen Reader Friendly: Proper semantic structure announces navigation context
• Color Contrast: Meets WCAG 2.1 AA standards (4.5:1 minimum)
• Responsive Design: Adapts to mobile, tablet, and desktop viewports
• Theme Support: Works with light mode, dark mode, and Black Trigram theme

Usage Instructions

<nav aria-label="Breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a href="/">Home</a>
    </li>
    <li class="breadcrumb-item">
      <a href="/section.html">Section</a>
    </li>
    <li class="breadcrumb-item" aria-current="page">
      Current Page
    </li>
  </ol>
</nav>

Testing Checklist

• ✅ Keyboard navigation (Tab, Shift+Tab, Enter)
• ✅ Screen reader announcements (test with NVDA, JAWS, or VoiceOver)
• ✅ Color contrast meets WCAG 2.1 AA (4.5:1 for normal text)
• ✅ Responsive design works on all viewport sizes
• ✅ Focus indicators are clearly visible
• ✅ Hover states provide visual feedback
• ✅ Works in light mode and dark mode
• ✅ Works with Black Trigram theme