Breadcrumbs
Announcing Breadcrumbs Tool: A Navigation Script
February 28, 2025 🔧 Making-Of
Breadcrumb trails with mermaid endshapes. Drop in your path specs, get back an interactive trail. A small .js and .css snippet that you can customise.
The path spaces are a 'directory listing' and you can navigate up and down in the list at each level. If you use / as the separator in the directory listing, then the breadcrumb end shapes are slanted like / too. Use > ) ] or < ( [ for other end shapes.
Try it Here
Spike Solution - Breadcrumb Shapes
At the time I began writing the tool I had end shapes drawn to a canvas, but I didn't have them for embedding in HTML. So I got Claude to make end shapes for use in HTML as a spike solution .
Spike Solution - Navigation
The next step was to get breadcrumb navigation - but without the end shapes. I wanted arrow keys left/right to change the current level in the heirarchy and up/down to change the selected item.
Spike Solution - Path Parser
I thought it would be a cute idea to use the actual path separator to determine the end shapes for the breadcrumbs. The usual
/
in a path spec would give you parallelogram breadcrumbs,
>
would give you chevrons,
)
round ends.
Small details:
- If you don't want flat ends on the first and last breadcrumbs, you can put end shapes on the ends of the paths.
-
If you want 'blobcrumbs', where the crumbs don't fit snugly, you can put two end shapes as separators. For example
)(as a separator will end one round blobcrumb and start the next one.
Chronology
- 30-Sept-2025 Initial launch, basic functionality.