Goals

  • Help visitors understand where they are within the portal.
  • Provide quick jumps to section hubs and related indexes.
  • Expose clear link context for screen readers and search engines.

Design & Semantics

  1. Wrap breadcrumb nav in <nav aria-label="Breadcrumb"> with an ordered list.
  2. Use separators via CSS (e.g., content: "/";) to keep markup clean.
  3. Ensure the current page is marked with aria-current="page" and not linked.
  4. Keep concise labels; avoid truncating critical context such as species names.

IA Mapping

  • Species: Home → Species → Specific species page.
  • Safety: Home → Safety → Topic (e.g., testing, emergency procedures).
  • Microdosing: Home → Microdosing → Guide (protocols, schedules).
  • Research: Home → Research → Subtopic (clinical studies, mechanisms).
  • Optimization: Home → Optimization → Page.

Implementation Steps

  1. Create a shared breadcrumb snippet in templates to avoid duplication.
  2. Verify all pages include a breadcrumb reflecting actual folder hierarchy.
  3. Add JSON-LD BreadcrumbList with absolute URLs where appropriate.
  4. Test keyboard navigation and screen reader output for clarity.
  5. Keep contrast high and font sizes legible on mobile.

Testing Checklist

  • Screen reader announces "Breadcrumb" and the path order.
  • Each link is focusable with visible focus outlines.
  • Current page is not a link and is announced correctly.
  • Breadcrumb wraps gracefully on small screens without horizontal scroll.
  • Structured data validates without errors.

FAQ

  1. Do breadcrumbs replace navigation? No, they complement top nav and section indexes.
  2. Should we shorten labels? Keep them meaningful; abbreviate only if context is obvious.
  3. How to handle deep paths? Collapse intermediate nodes only if redundant; prefer full clarity.
  4. Do we show breadcrumbs on home? Optional; typically start from second level pages.
  5. What about interactive tools? Include them within the most relevant hub (e.g., Interactive or Resources).
  6. Can breadcrumbs be hidden on print? Yes, if they distract; otherwise keep for citation clarity.
  7. Should icons be included? Minimal chevrons are fine; ensure they don't replace text.
  8. How to avoid duplication? Centralize breadcrumb generation and reuse across templates.