diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-trees/sidebar-menu-item.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-trees/sidebar-menu-item.element.ts
index 5537ea7ff6..81df6319d5 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-trees/sidebar-menu-item.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-trees/sidebar-menu-item.element.ts
@@ -1,9 +1,9 @@
 import { v4 as uuidv4 } from 'uuid';
 import { css, html } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
-import { customElement, property, state } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 import { UmbLitElement } from '@umbraco-cms/element';
-import type { ManifestTree } from '@umbraco-cms/models';
+import type { ManifestSidebarMenuItem } from '@umbraco-cms/models';
 
 @customElement('umb-sidebar-menu-item')
 export class UmbSidebarMenuItem extends UmbLitElement {
@@ -11,33 +11,15 @@ export class UmbSidebarMenuItem extends UmbLitElement {
 
 	private _key = uuidv4();
 
-	_manifest?: ManifestTree;
 	@property({ type: Object, attribute: false })
-	public get manifest(): ManifestTree | undefined {
-		return this._manifest;
-	}
-	public set manifest(value: ManifestTree | undefined) {
-		const oldVal = this._manifest;
-		this._manifest = value;
-		this.requestUpdate('manifest', oldVal);
-
-		if (value) {
-			this._treeItem = {
-				key: this._key,
-				name: value.meta.label ?? value.name,
-				icon: value.meta.icon,
-				type: value.meta.rootNodeEntityType,
-				hasChildren: false,
-				parentKey: null,
-			};
-		}
-	}
-
-	@state()
-	private _treeItem: Entity;
+	manifest!: ManifestSidebarMenuItem;
 
 	render() {
-		return html`<umb-tree-item .treeItem=${this._treeItem}></umb-tree-item>`;
+		return html`<umb-tree-item
+			.key="${this._key}"
+			.label=${this.manifest.meta.label || this.manifest.name}
+			.icon=${this.manifest.meta.icon}
+			.entityType=${this.manifest.meta.entityType}></umb-tree-item>`;
 	}
 }
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section.context.ts
index 549afb4808..2c8399c027 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section.context.ts
@@ -22,8 +22,8 @@ export class UmbSectionContext {
 	public readonly activeTree = this._activeTree.asObservable();
 
 	// TODO: what is the best context to put this in?
-	private _activeTreeItem = new ReplaySubject<Entity | undefined>(1);
-	public readonly activeTreeItem = this._activeTreeItem.asObservable();
+	private _activeTreeItemKey = new ReplaySubject<string | undefined>(1);
+	public readonly activeTreeItemKey = this._activeTreeItemKey.asObservable();
 
 	// TODO: what is the best context to put this in?
 	private _activeView = new ReplaySubject<ManifestSectionView | undefined>(1);
@@ -47,8 +47,8 @@ export class UmbSectionContext {
 		this._activeTree.next(tree);
 	}
 
-	public setActiveTreeItem(treeItem: Entity) {
-		this._activeTreeItem.next(treeItem);
+	public setActiveTreeItemKey(key: string) {
+		this._activeTreeItemKey.next(key);
 	}
 
 	public setActiveView(view: ManifestSectionView) {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/action/tree-item-action.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/action/tree-item-action.element.ts
index 773916db86..64e507dc58 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/action/tree-item-action.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/action/tree-item-action.element.ts
@@ -63,7 +63,7 @@ export default class UmbTreeItemActionElement extends UmbLitElement {
 	private _observeActiveTreeItem() {
 		if (!this._sectionContext) return;
 
-		this.observe(this._sectionContext.activeTreeItem, (treeItem) => {
+		this.observe(this._sectionContext.activeTreeItemKey, (treeItem) => {
 			this._activeTreeItem = treeItem;
 		});
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/context-menu/tree-context-menu-page-action-list.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/context-menu/tree-context-menu-page-action-list.element.ts
index 47a9d3065a..d129d62180 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/context-menu/tree-context-menu-page-action-list.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/context-menu/tree-context-menu-page-action-list.element.ts
@@ -73,7 +73,7 @@ export class UmbTreeContextMenuPageActionListElement extends UmbLitElement {
 	private _observeActiveTreeItem() {
 		if (!this._sectionContext) return;
 
-		this.observe(this._sectionContext.activeTreeItem, (treeItem) => {
+		this.observe(this._sectionContext.activeTreeItemKey, (treeItem) => {
 			this._activeTreeItem = treeItem || undefined;
 		});
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/navigator/tree-navigator.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/navigator/tree-navigator.element.ts
index 9eb80fbb5a..d3306add02 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/navigator/tree-navigator.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/navigator/tree-navigator.element.ts
@@ -5,7 +5,6 @@ import { customElement, state } from 'lit/decorators.js';
 import { UmbLitElement } from '@umbraco-cms/element';
 import type { Entity } from '@umbraco-cms/models';
 import { UmbTreeDataStore } from '@umbraco-cms/stores/store';
-import { DocumentTreeItem } from '@umbraco-cms/backend-api';
 
 import '../tree-item.element';
 
@@ -17,9 +16,9 @@ export class UmbTreeNavigator extends UmbLitElement {
 	private _loading = true;
 
 	@state()
-	private _items: DocumentTreeItem[] = [];
+	private _items: Entity[] = [];
 
-	private _store?: UmbTreeDataStore<DocumentTreeItem>;
+	private _store?: UmbTreeDataStore<any>;
 
 	constructor() {
 		super();
@@ -52,7 +51,14 @@ export class UmbTreeNavigator extends UmbLitElement {
 			${repeat(
 				this._items,
 				(item) => item.key,
-				(item) => html`<umb-tree-item .treeItem=${item as Entity} .loading=${this._loading}></umb-tree-item>`
+				(item) =>
+					html`<umb-tree-item
+						.key=${item.key}
+						.label=${item.name}
+						.icon=${item.icon}
+						.entityType=${item.type}
+						.hasChildren=${item.hasChildren}
+						.loading=${this._loading}></umb-tree-item>`
 			)}
 		`;
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item.element.ts
index f9b669f5f6..94efa53d4b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item.element.ts
@@ -16,8 +16,20 @@ import { UmbLitElement } from '@umbraco-cms/element';
 export class UmbTreeItem extends UmbLitElement {
 	static styles = [UUITextStyles, css``];
 
-	@property({ type: Object, attribute: false })
-	treeItem!: Entity;
+	@property({ type: String })
+	key = '';
+
+	@property({ type: String })
+	label = '';
+
+	@property({ type: String })
+	icon = '';
+
+	@property({ type: String })
+	entityType = '';
+
+	@property({ type: Boolean, attribute: 'has-children' })
+	hasChildren = false;
 
 	@state()
 	private _childItems?: Entity[];
@@ -75,19 +87,19 @@ export class UmbTreeItem extends UmbLitElement {
 
 	private _handleSelectedItem(event: Event) {
 		event.stopPropagation();
-		this._treeContext?.select(this.treeItem.key);
+		this._treeContext?.select(this.key);
 	}
 
 	private _handleDeselectedItem(event: Event) {
 		event.stopPropagation();
-		this._treeContext?.deselect(this.treeItem.key);
+		this._treeContext?.deselect(this.key);
 	}
 
 	private _observeSection() {
 		if (!this._sectionContext) return;
 
 		this.observe(this._sectionContext?.data, (section) => {
-			this._href = this._constructPath(section?.meta.pathname || '', this.treeItem.type, this.treeItem.key);
+			this._href = this._constructPath(section?.meta.pathname || '', this.entityType, this.key);
 		});
 	}
 
@@ -102,7 +114,7 @@ export class UmbTreeItem extends UmbLitElement {
 	private _observeIsSelected() {
 		if (!this._treeContext) return;
 
-		this.observe(this._treeContext.selection.pipe(map((keys) => keys?.includes(this.treeItem.key))), (isSelected) => {
+		this.observe(this._treeContext.selection.pipe(map((keys) => keys?.includes(this.key))), (isSelected) => {
 			this._selected = isSelected || false;
 		});
 	}
@@ -110,8 +122,8 @@ export class UmbTreeItem extends UmbLitElement {
 	private _observeActiveTreeItem() {
 		if (!this._sectionContext) return;
 
-		this.observe(this._sectionContext?.activeTreeItem, (treeItem) => {
-			this._isActive = treeItem?.key === this.treeItem.key;
+		this.observe(this._sectionContext?.activeTreeItemKey, (key) => {
+			this._isActive = this.key === key;
 		});
 	}
 
@@ -132,7 +144,7 @@ export class UmbTreeItem extends UmbLitElement {
 		this._loading = true;
 
 		// TODO: we should do something about these types, stop having our own version of Entity.
-		this.observe(this._store.getTreeItemChildren(this.treeItem.key) as Observable<Entity[]>, (childItems) => {
+		this.observe(this._store.getTreeItemChildren(this.key) as Observable<Entity[]>, (childItems) => {
 			this._childItems = childItems;
 			this._loading = false;
 		});
@@ -144,18 +156,24 @@ export class UmbTreeItem extends UmbLitElement {
 				? repeat(
 						this._childItems,
 						(item) => item.key,
-						(item) => html`<umb-tree-item .treeItem=${item}></umb-tree-item>`
+						(item) =>
+							html`<umb-tree-item
+								.key=${item.key}
+								.label=${item.name}
+								.icon=${item.icon}
+								.entityType=${item.type}
+								.hasChildren=${item.hasChildren}></umb-tree-item>`
 				  )
 				: ''}
 		`;
 	}
 
 	private _openActions() {
-		if (!this._treeContext || !this._sectionContext || !this.treeItem) return;
+		if (!this._treeContext || !this._sectionContext) return;
 
 		this._sectionContext?.setActiveTree(this._treeContext?.tree);
-		this._sectionContext?.setActiveTreeItem(this.treeItem);
-		this._treeContextMenuService?.open({ name: this.treeItem.name, key: this.treeItem.key });
+		this._sectionContext?.setActiveTreeItemKey(this.key);
+		this._treeContextMenuService?.open({ name: this.label, key: this.key });
 	}
 
 	render() {
@@ -165,12 +183,12 @@ export class UmbTreeItem extends UmbLitElement {
 				?selectable=${this._selectable}
 				?selected=${this._selected}
 				.loading=${this._loading}
-				.hasChildren=${this.treeItem.hasChildren}
-				label="${this.treeItem.name}"
+				.hasChildren=${this.hasChildren}
+				label="${this.label}"
 				href="${ifDefined(this._href)}"
 				?active=${this._isActive}>
 				${this._renderChildItems()}
-				<uui-icon slot="icon" name="${this.treeItem.icon}"></uui-icon>
+				<uui-icon slot="icon" name="${this.icon}"></uui-icon>
 				<uui-action-bar slot="actions">
 					<uui-button @click=${this._openActions} label="Open actions menu">
 						<uui-symbol-more></uui-symbol-more>