diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-breadcrumb/workspace-menu-breadcrumb/workspace-menu-breadcrumb.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-breadcrumb/workspace-menu-breadcrumb/workspace-menu-breadcrumb.element.ts
index 21b55ca72e..4160be3e0b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-breadcrumb/workspace-menu-breadcrumb/workspace-menu-breadcrumb.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-breadcrumb/workspace-menu-breadcrumb/workspace-menu-breadcrumb.element.ts
@@ -2,12 +2,9 @@ import { UMB_WORKSPACE_CONTEXT } from '../../../workspace.context-token.js';
import { css, customElement, html, ifDefined, map, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { UMB_MENU_STRUCTURE_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/menu';
import { UMB_SECTION_CONTEXT } from '@umbraco-cms/backoffice/section';
-import {
- UMB_MENU_STRUCTURE_WORKSPACE_CONTEXT,
- type UmbMenuStructureWorkspaceContext,
- type UmbStructureItemModel,
-} from '@umbraco-cms/backoffice/menu';
+import type { UmbMenuStructureWorkspaceContext, UmbStructureItemModel } from '@umbraco-cms/backoffice/menu';
@customElement('umb-workspace-breadcrumb')
export class UmbWorkspaceBreadcrumbElement extends UmbLitElement {
@@ -65,8 +62,8 @@ export class UmbWorkspaceBreadcrumbElement extends UmbLitElement {
}
#getHref(structureItem: UmbStructureItemModel) {
- const workspaceBasePath = `section/${this.#sectionContext?.getPathname()}/workspace/${structureItem.entityType}/edit`;
- return structureItem.isFolder ? undefined : `${workspaceBasePath}/${structureItem.unique}`;
+ if (structureItem.isFolder) return undefined;
+ return `section/${this.#sectionContext?.getPathname()}/workspace/${structureItem.entityType}/edit/${structureItem.unique}`;
}
override render() {
@@ -79,7 +76,7 @@ export class UmbWorkspaceBreadcrumbElement extends UmbLitElement {
>${this.localize.string(structureItem.name)}`,
)}
- ${this._name}
+ ${this._name}
`;
}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-breadcrumb/workspace-variant-menu-breadcrumb/workspace-variant-menu-breadcrumb.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-breadcrumb/workspace-variant-menu-breadcrumb/workspace-variant-menu-breadcrumb.element.ts
index 98973543b4..05a7d9c449 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-breadcrumb/workspace-variant-menu-breadcrumb/workspace-variant-menu-breadcrumb.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-breadcrumb/workspace-variant-menu-breadcrumb/workspace-variant-menu-breadcrumb.element.ts
@@ -1,15 +1,14 @@
-import { UMB_VARIANT_WORKSPACE_CONTEXT, type UmbVariantDatasetWorkspaceContext } from '../../../contexts/index.js';
+import { UMB_VARIANT_WORKSPACE_CONTEXT } from '../../../contexts/index.js';
+import type { UmbVariantDatasetWorkspaceContext } from '../../../contexts/index.js';
import { css, customElement, html, ifDefined, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { UmbVariantId } from '@umbraco-cms/backoffice/variant';
import { UMB_APP_LANGUAGE_CONTEXT } from '@umbraco-cms/backoffice/language';
+import { UMB_MENU_VARIANT_STRUCTURE_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/menu';
import { UMB_SECTION_CONTEXT } from '@umbraco-cms/backoffice/section';
import type { UmbAppLanguageContext } from '@umbraco-cms/backoffice/language';
-import {
- UMB_MENU_VARIANT_STRUCTURE_WORKSPACE_CONTEXT,
- type UmbVariantStructureItemModel,
-} from '@umbraco-cms/backoffice/menu';
+import type { UmbVariantStructureItemModel } from '@umbraco-cms/backoffice/menu';
@customElement('umb-workspace-variant-menu-breadcrumb')
export class UmbWorkspaceVariantMenuBreadcrumbElement extends UmbLitElement {
@@ -96,19 +95,28 @@ export class UmbWorkspaceVariantMenuBreadcrumbElement extends UmbLitElement {
// TODO: we should move the fallback name logic to a helper class. It will be used in multiple places
#getItemVariantName(structureItem: UmbVariantStructureItemModel) {
- const fallbackName =
- structureItem.variants.find((variant) => variant.culture === this._appDefaultCulture)?.name ??
- structureItem.variants[0].name ??
- 'Unknown';
- const name = structureItem.variants.find((variant) => this._workspaceActiveVariantId?.compare(variant))?.name;
- return name ?? `(${fallbackName})`;
+ // If the active workspace is a variant, we will try to find the matching variant name.
+ if (!this._workspaceActiveVariantId?.isInvariant()) {
+ const variant = structureItem.variants.find((variantId) => this._workspaceActiveVariantId?.compare(variantId));
+ if (variant) {
+ return variant.name;
+ }
+ }
+
+ // If the active workspace is invariant, we will try to find the variant that matches the app default culture.
+ const variant = structureItem.variants.find((variant) => variant.culture === this._appDefaultCulture);
+ if (variant) {
+ return `(${variant.name})`;
+ }
+
+ // If an active variant can not be found, then we fallback to the first variant name or a generic "unknown" label.
+ return structureItem.variants?.[0]?.name ?? '(#general_unknown)';
}
#getHref(structureItem: any) {
+ if (structureItem.isFolder) return undefined;
const workspaceBasePath = `section/${this.#sectionContext?.getPathname()}/workspace/${structureItem.entityType}/edit`;
- return structureItem.isFolder
- ? undefined
- : `${workspaceBasePath}/${structureItem.unique}/${this._workspaceActiveVariantId?.culture}`;
+ return `${workspaceBasePath}/${structureItem.unique}/${this._workspaceActiveVariantId?.culture}`;
}
override render() {
@@ -116,11 +124,11 @@ export class UmbWorkspaceVariantMenuBreadcrumbElement extends UmbLitElement {
${this._structure.map(
(structureItem) =>
- html`${this.localize.string(this.#getItemVariantName(structureItem))}`,
)}
- ${this._name}
+ ${this._name}
`;
}