New breadcrumb of SEO Framework!

Hi David,

First, thank you for the lovely review!

I recently published a KB article about the breadcrumb: https://tsf.fyi/kb/a/212.

To change the “Home” entry, you can use the home attribute, e.g. [tsf_home home="Anything here"].

To remove “Category: “, for now, you’d have to toggle on “Remove term type prefixes from generated archive titles” or otherwise provide a custom SEO meta title for the category.

I’m planning to add more control to the breadcrumbs (specifically, removing the Term:-prefix), but I am researching its reception and awaiting feedback before making rash design decisions I cannot undo.

I see you added a red line to the margin. That’s a quirk because we used the <ol> tag. I’ll have that fixed with the next update. The following filter will emulate that fix:

add_filter(
	'the_seo_framework_breadcrumb_shortcode_css',
	function( $styles, $class ) {

		$styles[ ".$class ol" ][] = 'margin-inline-start:0';

		return $styles;
	},
	10,
	2
);

However, please note that CSS specificity may cause that CSS to be overwritten by your theme styles. Using margin-inline-start:0 !important will force-override the other styles. I’m looking into making this more reliable without breaking integration overall.

Let me know if you have any suggestions for improvements to the breadcrumb. Cheers!

Hi Sybre!

Thank you so much for your help! I’m hopeful that there will be some improvements soon.

In my personal opinion, I prefer using HTML more and limiting CSS to the minimum. I believe that using the method from the Breadcrumb NavXT plugin would be easier and more effective. For the margin, we can use: “  (space)” instead of adding margin. For example: “?” would be “ »&nbsp” (space ? space). I hope it will be helpful for you!

Have a wonderful day!

Thanks for the feedback!

I was able to fix the margin-before issue by rewriting the breadcrumb styles with a little more specificity, unlike the filter above. This change will come next Tuesday if everything goes as planned.

The current margin uses the ch spacing, which is related to the “0” glyph’s width. I may consider using ex, which denotes the x-height of a font. However, this unit is unconventional and may cause accessibility issues.

I also considered your suggestion during development, but using HTML-only glyphs is against accessibility guidelines. It is detailed here: https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/examples/breadcrumb/

To prevent screen reader announcement of the visual separators between links, they are added via CSS:
– The separators are part of the visual presentation that signifies the breadcrumb trail, which is already semantically represented by the nav element with its label of Breadcrumb. So, using a display technique that is not represented in the accessibility tree used by screen readers prevents redundant and potentially distracting verbosity.

The current breadcrumb’s CSS is minimal and can be tweaked using theme-specific styling. Still, thinking a step ahead: Having a toggle to switch between the current CSS-supported and HTML-only will add a lot of complexity, so I do not think that wise — at least, not with how the shortcode is constructed now.

Hi David,

TSF v5.0.2 was just released with a fix for the aforementioned margin-before issue.

If there’s anything else I can do for you, or if you have any more ideas, let me know!

Cheers ??