Initially I was thinking making it use tc-muted and not as tags, but-
this would look better I think, and it reminds me of a linux terminal.
It would be nice to see them above or below the tags, and pulling their color from the color of the tiddler they represent.
Those breadcrumbs look great! Those would look good as tabs in the tabs macro too.
However, the vertical text alignment is not centered and too high on Firefox/Linux and they look a bit weird.
Adding line-height: 28px; to the div.breadcrumbs a.crumb section makes it look similar on Firefox and Chrome.
I chose 28px vs 30px just because it looks a bit better to my eye when the "p"s, "j"s and "q"s drop below the text baseline.
/Mike
Well, the whole point is to make the visually distinguished from the tab macro! 
Sure, as I said very rough. I’m not a graphics person, and once I got them close enough I stopped. I feel the text should also shift a few pixels right. And I have no idea what CSS techniques are being used across the core. I don’t know the correct foreground and background to use (they probably need to be dynamic.) This was just to demo the concept.
you can set that simply enough with the colour macro, for instance color:<<colour foreground>>; takes care of that.
All things considered though, this is a really well made demo
Thanks. But let’s not forget that my first version was in ASCII. 
Here is the typical endless-loop scenario: a is tagged b and b is tagged a → 
But a is also tagged x … Which actually happens a lot in the the TW docs. …
x … does not exist. …
So the “recursion-protection” logic at the moment is:
Explanation of the image below
Does that make sense?
What do you think?
The code is not published yet.
Well … here is a mockup using the tabs macro FWIW:
<style>
div.breadcrumbs [role=switch] {
padding: 3px 10px 3px 20px;
margin-left: 10px;
display: inline-block;
height: 30px;
position: relative;
background: #ffe476 !important;
text-decoration: none;
line-height: 28px;
}
div.breadcrumbs [role=switch]:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-left: 15px solid white;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
}
div.breadcrumbs [role=switch]:before {
content: "";
position: absolute;
right: -15px;
bottom: 0;
width: 0;
height: 0;
border-left: 15px solid #ffe476;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
}
div.breadcrumbs .tc-tab-buttons button{
border-left: none;
border-top: none;
border-right: none;
border-bottom: none;
}
.tc-tab-buttons button.tc-tab-selected{
background: #eeeeee !important;
}
.tc-tab-buttons button.tc-tab-selected:before{
border-left: 15px solid #eeeeee;
}
</style>
<<tabs "[[Filters]] [[Filter Syntax]] [[Filter Expression]] [[Filter Filter Run Prefix]]" class:"breadcrumbs">>
Breadcrumbs Tabs.json (1.3 KB)
The tab selection actions or the template/buttonTemplate parameters might allow manipulation of the tabs filter to build up the breadcrumb trail however you want.
Fodder for thought.
/Mike
Hi Mike,
A very interesting approach. Thx for sharing.
It sounds like it makes some sense. It’s not clear to me if this is meant to be opt-in. Will this only appear if you have a certain tag, or a particular value in some field?
Although I really want something like this for reference documentation, I don’t know that it makes sense on the entire tiddlywiki.com. Even in reference documentation, though, I am afraid of trying to impose a hierarchy on a fundamentally non-hierarchical wiki. In your solution, what happens when there are multiple paths to the TableOfContents?
But there are parts which would really benefit from breadcrumbs. I absolutely love the bit done with the railroad diagrams; but that’s going to applicable only to documentation of syntax.
I don’t know the answer, and I’d love to see how your code might help. But I’m afraid I’m not particularly optimistic.
It’s not intended to be used everywhere.
We do have the table of contents TOC, which clearly is a hierarchy. … Just because TW can be non-linear, it does not mean that there is no structure. It’s the users decision how structured and hierarchical a wiki is. …
I think for the railroad diagrams used to describe the filter syntax, it’s essential to know “where” the info belongs to. I think to understand filters it’s important to know the context. … and breadcrumbs may make that context visible.
One will be chosen. Since tags are sorted alphabetically by default, the first one that has not been visited will be used. That’s it.
There are 3 macros atm.
sort[]
parent, so it can be used by my TOCp pluginlist-field to create breadcrumbs … I’m not sure if that is useful, but it may beNo. 2 can also use the tags field, but it does not sort. So the users are able to define the “path” by defining the tags accordingly.
Right. My greatest concern here is not how others might use such macros, but how we might use them on TW-com in order to improve it as a documentation source. For other places, this could be extremely useful.
But notice that there is a difference in the hierarchy expressed by breadcrumbs and that expressed by a TOC. In a TOC, we are giving an overview of where everything can be found. It doesn’t matter that Features > Drag and Drop and Features > Importing Tiddlers both include DragAndDropMechanism. It simply can be found in both places. Breadcrumbs describe where a particular tiddler resides. If our breadcrumbs show Features > Importing Tiddlers > DragAndDropMechanism, then we don’t report what might be the more important Features > Drag and Drop > DragAndDropMechanism. I faced a similar issue in my Wizard Nav Plugin, but I was expecting it to be a rare enough case that I simply accepted the ugliness of two such footers. I don’t think we can do that in a more generic mechanism.
That sounds like the best of all worlds!
The latest version of the docs with the breadcrumbs macros is live now: Start with Filter and Filter Syntax
The macros are developed with the tiddlywiki-com default CSS settings.
The macros are now named. .breadcrumbs and .breadcrumbsField … Do not miss the -dot- at the beginning
\define .breadcrumbs(start, stop, exclude, label, field, sort)
stop … (required) tiddler title to stop … Needs to be a tiddler, otherwise there is an error message
start … (optional) tiddler title to start with. defaults to currentTiddler
exclude … (optional) tiddler list of titles to be excluded. eg: title [[title with spaces]]
label … (optional) label to be shown in front of the breadcrumbs nav
sort … (optional) defaults to yes. In TW tags are usually sorted
\define .breadcrumbsField(start, exclude, label, field:"list")
start … (optional) tiddler title which contains the “list” field. defaults to currentTiddler
exclude … (optional) tiddler list of titles to be excluded. eg: title [[title with spaces]]
label … (optional) label to be shown in front of the breadcrumbs nav
field … (optional) defaults to “list”. Field name that contains a title-list that should be shown as breadcrumbs
The “field” verions can be used to create “out of order” breadcrumbs as shown in Filter Operators
see: Can Hirarchical Breadcrumbs Benefit TW Documentation - #21 by pmario
Many existing color palettes do not contain valid settings for the <<colour message-background>>; which is used for the breadcrumb background.
The railroad-plugin CSS uses those palette values too.
So the railroad-plugin and breadcrumbs macros will need improved palettes to work well with all palettes.
You can use the Palette Manager Edition to globally improve existing palettes. The edition contains the palette-manager-plugin-beta that can be imported into your wiki.
The INTRO for the palette-manager edition can be found at:
have fun!
Mario
Interestingly, I just noticed that MDN now has something similar:
I’m not sure if this has always been there or I just noticed it because of this related discussion, though.
We can have 6 different hierarchies. I like to call them: Stories. … I do have a story-editor, which allows to create as many stories as you like. … But the UI is bugged atm.
Just brainstorming
The visual representation of different story branches using breadcrumbs visualisation could look as follows.
The whole “story” would be visible from start to end.
If a branch is possible it will be shown too … from the branch point till the end.
… and so on
________ _____________ __________________ _____________ _____________
\ Start \ \ Main Branch \ \ Decision making \ \ Branch A \ \ End \
/________/ /_____________/ /_________________/ /____________/ /____________/
_____________ _____________________ ___________
\ Branch B *\ \ Branch can be \ \ End \
/____________/ /_independent_from_A_/ /__________/
Where the actual tiddler is marked with a *
The actively viewed tiddler will be visually different. In the ASCII art represented by the * …
Higher level branches can be “collapsed” … to increase readability. eg:
________ _____________ _____________
\ Start \ ... \ Branch A \ \ End \
/_______/ /____________/ /____________/
_____________ _____________________ ___________
\ Branch B *\ \ Branch can be \ \ End \
/____________/ /_independent_from_A_/ /__________/
If Branch B is active and Branch A has the same "level" ... the Main Branch can be collapsed
I’ve called them “pathways” and “tutorials” in my WizardNav Plugin. But I like “stories” a lot.
That is a very useful depiction of parts of a complex wiki. But I think it’s not capturing what people really use breadcrumbs for on the modern web. They do not represent the location on a linear journey through a fixed set of nodes, but rather a hierarchy leading to the current node.
In a sense, they are a simplified, partial table of contents. A TOC shows the hierarchy from the root to every node. Breadcrumbs show the hierarchy from the root to the current node, allowing you to easily jump back to any level above the current node. Links to content below the current node are not shown as breadcrumbs. They are handled in different way internal to the current node.
So, while I think what you’re looking at might well be worth exploring, I don’t think of it as having much to do with how we’d use breadcrumbs.
As to your actual work. How would you expect things to display if nodes are in very different spots in different stories? That is, if one story is A -> B -> C -> D -> E -> F, another is A -> W -> X -> Y -> Z -> B and a third is A -> Y -> F -> B -> C -> W, how do you place the various elements? Sometimes B is ahead of F, sometimes behind it, and sometimes F doesn’t show. It’s easy enough if you display one story at a time, but with multiple ones, it seems to me to become very tricky.
Breadcrumbs will be from a root to a node only in highly structured environments, I have use large mainframe systems that use this. They usually demand you follow the structured path to get the job done, and as a result the path or story is equivalent to breadcrumbs.
I do like the idea of stories represented like @pmario illustrated but I see, in some cases, the potential for too much information to handle easily and by default on tiddlers.
I feel confident that we can find a way to represent the relationshipps between tiddlers in all these different ways of organising them such as a heirchy, list, trail/story, breadcrumbs (Or path) and perhaps journeys and itineries (like a traveling holiday plan)
Post script
That’s the usecase, that I mainly wanted to discuss with this thread and that I want to try to improve with a work in progress PR at GH.
If users are new to a topic I think it’s important to provide the hierarchical context a tiddler is in. Once users are familiar with the whole system, this information will be less inportant for the understanding, but it can be a “quality of live” improvement, because it provides a nice and fast way for “linked navigation”
That’s also a main goal of the PR mentioned above.
IMO this could be browser history, which can be activated in the TW ControlPanel → Settings tab.
The browser history 3) could make sense. … but it does not, since the info stored there is not good enough atm.
IMO these features especially 2) should be improved and more prominently document.
That’s right. IMO a story-tiddler can contain meta text, eg: a summary and one or more configurations that allow it to “tell a story”.
Those 2 “stories” could be created by the author. … Creating stories “in between” those 2 extremes should be easy to create by the user.
IMO that would be a valuable goal.
… just some more thoughts
That’s a challenge, which imo would be worth while to experiment with. I do not have a solution, but I’m very interested in presenting information in a context. … Even if the system itself is “non linear” … Or especially if the system is non linear.
I have given this some thought and recall having found a solution. I hope the recollection is correct. I will look for my notes. One memory I have is having an independant position stored for each story and a current story and to navigate away from the current story always returns to your original position in the current story unless you change story.
