Breadcrumbs could display multiple word categories nicer. Something to consider...

[tgolla]

Initially I thought that breadcrumbs just didn’t play nice with multiple word categories. For example... ‘Developer Tools’ because while the Jekyll URL for the post would generate as developer%20tools, breadcrumbs were coming out developer-tools.

It seems that this may be more ignorance on my part being new to using Jekyll as it seems that the norm, while Jekyll will deal with URLs that have spaces by substituting %20, it is better to simply use a dash for a space in the actual category name (i.e. ‘Developer-Tools’).

This has moved me to the next issue which is multiple word categories are not title capitalized. Now this is understandable as the Liquid code creating the breadcrumb text replaces any dashes with a space and applies the Liquid filter capitalize. But this is the UI and I would like it to look pretty. For example, ‘Developer Tools’ not ‘Developer tools’. And then there are the categories that don’t follow any of the rules like ‘.NET’ to only be formatted by the current code as ‘.net’.

So, what’s the possibility of adding say a YAML data file that matches category to a title similar to the navigation.yml file.

category: Developer-Tools
title: Developer Tools
category: .NET
title: .NET

[mmistakes]

This is part of the reason I marked breadrcrumbs as a beta feature, it's half baked at best and probably not something you should use unless it fits a narrow set of conditions.

There are plugins that do breadcrumbs but those have their limitation. There's a lot of variation with the naming of categories as you've mentioned and how URL's are treated. Not to mention how permalinks can mess with things too which makes it even more challenging.

The most predictable solution I've come across (and what I did with my old Jekyll sites) was to add the breadcrumb links to a post or page's YAML front matter. Note: To eliminate needing to add breadcrumb front matter to all posts/pages you can leverage front matter defaults glob them together and DRY it up.

Example:

breadcrumbs:
  - label: "Breadcrumb Name 1"
    url: /breadcrumb-1/
  - label: "Breadcrumb Name 2"
    url: /breadcrumb-1/breadcrumb-2/

Then in the breadcrumbs component you'd loop over the breadcrumbs object to spit out the links. Here's a bare bones take at that without any styling or schema markup:

{% if page.breadcrumbs %}
<ul>
  <li><a href="{{ '/' | relative_url }}">Home</a></li>
  {% for crumb in page.breadcrumbs %}
    <li><a href="{{ crumb.url | relative_url }}">{{ crumb.label }}</a></li>
  {% endfor %}
  </ul>
{% endif %}

Which would spit out the following HTML:

<ul>
  <li><a href="/">Home<a></li>
  <li><a href="/breadcrumb-1/">Breadcrumb Name 1</a></li>
  <li><a href="/breadcrumb-1/breadcrumb-2/">Breadcrumb Name 2</a></li>
</ul>