Skip to content
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
- Wrap breadcrumb nav in
<nav aria-label="Breadcrumb"> with an ordered list.
- Use separators via CSS (e.g.,
content: "/";) to keep markup clean.
- Ensure the current page is marked with
aria-current="page" and not linked.
- 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
- Create a shared breadcrumb snippet in templates to avoid duplication.
- Verify all pages include a breadcrumb reflecting actual folder hierarchy.
- Add JSON-LD BreadcrumbList with absolute URLs where appropriate.
- Test keyboard navigation and screen reader output for clarity.
- 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
- Do breadcrumbs replace navigation? No, they complement top nav and section indexes.
- Should we shorten labels? Keep them meaningful; abbreviate only if context is obvious.
- How to handle deep paths? Collapse intermediate nodes only if redundant; prefer full clarity.
- Do we show breadcrumbs on home? Optional; typically start from second level pages.
- What about interactive tools? Include them within the most relevant hub (e.g., Interactive or Resources).
- Can breadcrumbs be hidden on print? Yes, if they distract; otherwise keep for citation clarity.
- Should icons be included? Minimal chevrons are fine; ensure they don't replace text.
- How to avoid duplication? Centralize breadcrumb generation and reuse across templates.