In my Blazor Server project, I have a breadcrumb in the AppLayout that works for all pages (menu items):
<ul id="breadcrumbs" class="breadcrumbs"><li><a href="#">Home</a></li> @if (CurrentModuleState != null) {<li>@CurrentModuleState.Descriptor.Name</li> }</ul>I need to modify the breadcrumb for just one specific page. To achieve this, I assigned an ID to the breadcrumb and used JavaScript to update it dynamically:
<script> window.updateBreadcrumb = function (breadcrumbText) { var breadcrumbElement = document.getElementById("breadcrumbs"); if (breadcrumbElement) { breadcrumbElement.innerHTML = breadcrumbText; } }</script>The issue is that once the JavaScript changes the breadcrumb, it stays modified even after navigating to other pages, and the default breadcrumb logic in the AppLayout no longer works as expected.
How can I ensure the JavaScript change only applies to the specific page and that the default breadcrumb behavior is restored on other pages?