Projects › BibleWeb › Cross-References › Breadcrumb navigation history in graph
Needs Design

Breadcrumb navigation history in graph

Area: Cross-References Milestone: v2

Context

Problem: When exploring the cross-reference graph, users click through many nodes. They lose track of their exploration path and can't easily retrace their steps to revisit an interesting connection they saw earlier.

Solution: A breadcrumb trail that tracks every node the user has explored in the graph. Users can press Backspace to step back through their exploration history.

Not included: Branching history (like browser tabs) or saving exploration sessions. This is a simple linear backtrack.

Functional

Expected user flow:

  1. User starts at John 3:16 (root node)
  2. Clicks Romans 5:8 → breadcrumb: John 3:16 > Romans 5:8
  3. Clicks 1 John 4:10 → breadcrumb: John 3:16 > Romans 5:8 > 1 John 4:10
  4. Presses Backspace → returns to Romans 5:8 view
  5. Presses Backspace again → returns to John 3:16

Edge cases:

  • At the root node, Backspace does nothing
  • Breadcrumb should be visible but compact (doesn't take too much screen space)

UX & Design

TODO: Design breadcrumb bar — horizontal trail at top of graph? Collapsed with count? TODO: Consider showing breadcrumb as clickable chips vs just a back button

Keyboard: Backspace to go back one step.

Technical

State: breadcrumbs: VerseLocation[] array tracking exploration path.

Implementation:

  • Push to breadcrumbs when expanding a new node
  • Pop from breadcrumbs on Backspace
  • Re-center graph on the previous node when going back

Note: The cross-ref sidebar already has internal breadcrumb navigation — the graph version should follow the same pattern.

Files:

  • apps/web/src/routes/(app)/crossrefs/[book]/[chapter]/[verse]/+page.svelte (modify)
  • apps/web/src/lib/components/bible/CrossRefGraph.svelte (modify)

Status

Current: NEEDS_DESIGN Milestone: v2 Priority: Medium — important for deep graph exploration

Design questions:

  1. How should the breadcrumb be displayed visually?
  2. Should clicking a breadcrumb item jump directly there (skipping intermediate steps)?
  3. Should there be a max breadcrumb length?

Dependencies:

  • Requires: cross-reference graph (DONE)
← Back to Cross-References features