I need to convert data of a structure similar to this:
into an interactive, HTML widget.
This widget will allow users to start from the end node (which I'm calling 'shirley' here) and work back to the beginning by choosing any one of the many paths leading to shirley. Each node is a html page.
I've got two ways to do this:
1 - using breadcrumbs in custom tabs as standard tabs don't allow users to click on the individual nodes of the breadcrumb which is how users will be traversing up and down the structure. image 1:
or image 2:
2 - using multiple breadcrumbs in a custom dropdown (same reason as custom tabs) image:
Both approaches are unwieldy and don't scale well with the number of paths leading to shirley, but I'm leaning towards multiple breadcrumbs in a dropdown.
My question is this, have I missed any approach that can do what I want better than multiple breadcrumbs in tabs and multiple breadcrumbs in dropdowns?
Update: While the nodes are HTML pages, they are not related to "site" navigation - the nodes do "history" navigation. Each node is a text snippet, and the nodes chained together form a "history" chain that the user will traverse. Nodes are created dynamically by the user's actions and there'll be about 100 to 150 such node chains(paths) on average per page, with expected peak of 1500. Chain branching is also by user action. Each path is created by the actions of ~multiple~ users with any one user having the ability to traverse the whole path (any and all of them) once it's created. Menus are not feasible.