Symbol before child pages in Breadcrumb path display

[MikeMavrok]

---

Issue with Breadcrumb path display

Description

Issue: The breadcrumb path in the bakerydemo site is showing an extra symbol (_) like underscore before some of the page names. For example, "Home > _Breads" instead of "Home > Breads".

This issue is observed in the Wagtail/bakerydemo repository.

Steps to Reproduce

1. Visit the bakerydemo site.
2. Navigate to any page that has child pages.
3. Observe the breadcrumb navigation at the top of the page.

Expected Behavior

The breadcrumb should display the correct path without any extra symbols.

Actual Behavior

The breadcrumb path contains an extra symbol (_) before certain page names.

Screenshots

Environment

• Wagtail version: 5.0
• Docker version 23.0.5
• Browser: Chrome
• Operating System: Windows 10

Additional Information

The error is probably located in breadcrumbs.html

[laymonage]

The "symbol" is actually an underline from CSS. This bug is a result of the text-decoration: underline; for the .breadcrumb selector:

bakerydemo/bakerydemo/static/css/main.css

Lines 836 to 845 in 046eb8e

	.breadcrumb {
	color: var(--dark);
	font-family: var(--font--secondary);
	font-size: var(--font-sm);
	line-height: 1.5;
	margin-bottom: 0;
	padding-left: 0;
	text-decoration: underline;
	background-color: transparent;
	}

The .breadcrumb selector covers the whole breadcrumb. We only want the underline to be applied on the links, and in fact we already do that here:

bakerydemo/bakerydemo/static/css/main.css

Lines 861 to 865 in 046eb8e

	.breadcrumb a,
	.breadcrumb .active {
	color: var(--dark);
	text-decoration: underline;
	}

So the correct fix should be to remove the text-decoration in .breadcrumb:

[lb-]

Fixed via #416