Like breadcrumbs were originally used – in ltr, anyway.
I guess in translation, they might be reversed (rtl)? Maybe not necessary…
Rough, but approaching what I was thinking of:
Breadcrumbs.json (1.4 KB)
<div class="breadcrumbs">
<a class="crumb" href="#">Filters</a>
<a class="crumb" href="#">Filter Syntax</a>
<a class="crumb" href="#">Filter Expression</a>
<a class="crumb" href="#">Filter Run Prefix</a>
</div>
<style>
div.breadcrumbs a.crumb{
padding: 3px 10px 3px 20px;
margin-left: 15px;
display: inline-block;
height: 30px;
position: relative;
background: #ffe476;
text-decoration: none;
}
div.breadcrumbs a.crumb: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 a.crumb: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;
}
</style>
4 Likes
Not sure I agree here, this is where I care less for the most significant and more for the most specific.
I agree with the issue about the host varying from the folder/file part.
- We could remedy this in tiddlywiki if we wanted.
My point is there are “horses for courses” and two ways to arrange them.
- See my next response
- I think actually “Hierarchical Breadcrumbs” is not valid, as I understand it, bread crumbs are what you leave behind, and are not “hierarchical” unless that is the exact path you followed.
- Although this does not mean this mistake has Not being made elsewhere, it has and often.
Not withstanding this;
- Indicating the current tiddlers place in a hierarchy is however a great idea.
- Ideally this can be inferred from the TableOfContents it is in, if not it would be simple to add a little more information to enable it.
To be honest I have done a lot of work on this and have a few topics relating to this in talk.tiddlywiki
- A Range of Guerrilla Operators have been written of late that assist with this
- I will review and return with examples.
Of note is; a tiddler in a tag tree such as TableOfContents already has its parent tag, as that is how it got in the tree in the first place, perhaps at least for tag trees we could list the tags towards the root tiddler after the tags?
- If they are tags, why not provide the tag pill (or slight style variation), then you can use the tag pill drop down to navigate to any tag or its children?
- I have also being working on a “Field Pill” that could also be used such as with @pmario TocP macros?, or as I have done with the relationship stored in additional tiddlers.
I agree with you, it shouldn’t appear as a navigation trail, but I struggle to find a correct wording for what should represent “reader’s position in the learning hierarchy for this matter (i.e. Filters)”.
Any idea ?
This part is already working, Mario’s macro uses the same tag hierarchy as ToC.
See my second proposal above, although I think this proposal won’t work well without a dedicated style for those tag pills (I like @Scott_Sauyet’s proposal for this purpose) to differentiate them from tiddler tags.
Does anyone have an idea on the best way to style tag pills differently, but only for this use case? FYI the code for this example currently uses the <<tag>> macro.
Fred
1 Like
That’s a good way to say it. I’m not sure that shortening it would lead to better clarity – the shorter you make it, the more abstract it will become: “active context” ← that’s horrible.
I think that ship has sailed. Breadcrumbs on the web are very rarely used to track your actual progress through a site. We have the Back button for that! But they are one of primary metaphors for expressing your position in a hierarchy. The other, used in either really deep hierarchies or more formal settings, is to show the path through a tree, sometimes with sibling nodes to various ancestors also displayed. We can use the TOC macros for that.
I have a continual frustration with trying to find reference documentation on the main site. This is an almost unavoidable consequence of its non-linearity; it’s hard to pair that with the sort of hierarchical view that reference documentation requires. I’d love if this were to help fix that problem. I’ve been thinking that it would require a separate documentation site to really fix well. And I probably will still work on that at some point, but it might move down the queue if this approach helps ease the pain.
The big problem is that TW demonstrates well that there are often multiple places data belongs, and multiple hierarchies that might include the same content. This makes it challenging as the main site serves so many purposes, and reference documentation is just one of them.
I love that notion! 
I think it’s simpler than that. Although we’d need a name to discuss it internally, we don’t need to name it at all publicly, just use it. We don’t have to have the word “breadcrumbs” or “hierarchy” or any such in the UI. People will still understand what is meant.
I absolutely love the double-use of the railroad diagrams for navigation, but that’s only useful in the limited cases where our hierarchy is related to syntax. Breadcrumbs are more general. But, as noted above, they are no panacea; there are multiple possible hierarchies, and we can’t have six different sets of breadcrumbs without getting far too confusing.
1 Like
This looks great and makes the progression of ideas very clear!
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. 
1 Like
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:
- Every tiddler can only be visited once
- non existing tag tiddlers will be shown (x)
- but since they have no tags the next higher level will always be the stop-tiddler.
- if the stop-tiddler does not exist an error-message will be shown.
Explanation of the image below
- “b” contains the macro, and is tagged “a” → So “a” will be next
- “a” is tagged “b” and “x” … “b” has been visited already → So “x” is next
- “x” does not exist … it will be shown → “c” (stop-tag) is shown … even if “x” does not exist
- I think it makes sense to show the stop-tiddler as the highest level, since it is requested in the macro call.
- I think the algorithm should “fail gracefully”
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
3 Likes
Hi Mike,
A very interesting approach. Thx for sharing.
1 Like
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.
- One that uses tags to “travel” up the hierarchy as described above using
sort[] - One that uses a user defined field name eg:
parent, so it can be used by my TOCp plugin - One that uses the
list-field to create breadcrumbs … I’m not sure if that is useful, but it may be
No. 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
temporary docs
\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
More info
see: Can Hirarchical Breadcrumbs Benefit TW Documentation - #21 by pmario
ToDo
- [x] Optimize CSS for small screens (I know what I want, but I didn’t have the time yet, no suggestions needed atm)
- [x] Dynamically calculate hardcoded pixel values
- [ ] Check existing colour palettes … most of them don’t play well with the macro atm
Help needed
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
3 Likes