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 ab1483fb18..d232ead8b9 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,8 +5,9 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { UmbLitElement } from '@umbraco-cms/element';
 import { UmbSectionContext } from '../../section/section.context';
+import { UmbTreeContextMenuService } from '../context-menu/tree-context-menu.service';
 import { UmbTreeContext } from '../tree.context';
-import type { Entity, ManifestTree } from '@umbraco-cms/models';
+import type { Entity } from '@umbraco-cms/models';
 import { UmbTreeDataStore } from '@umbraco-cms/stores/store';
 import { DocumentTreeItem } from '@umbraco-cms/backend-api';
 
@@ -33,12 +34,14 @@ export class UmbTreeNavigator extends UmbLitElement {
 	@state()
 	private _items: DocumentTreeItem[] = [];
 
-	@state()
-	private _tree?: ManifestTree;
-
 	@state()
 	private _href?: string;
 
+	@state()
+	private _treeRootNode: any;
+
+	private _treeContext?: UmbTreeContext;
+	private _treeContextMenuService?: UmbTreeContextMenuService;
 	private _store?: UmbTreeDataStore<DocumentTreeItem>;
 	private _sectionContext?: UmbSectionContext;
 
@@ -50,7 +53,19 @@ export class UmbTreeNavigator extends UmbLitElement {
 		});
 
 		this.consumeContext('umbTreeContext', (treeContext: UmbTreeContext) => {
-			this._tree = treeContext.tree;
+			this._treeContext = treeContext;
+
+			this._treeRootNode = {
+				name: treeContext.tree.meta.label || '',
+				icon: treeContext.tree.meta.icon || '',
+				type: treeContext.tree.meta.rootNodeEntityType,
+				hasChildren: true,
+				parentKey: null,
+			};
+		});
+
+		this.consumeContext('umbTreeContextMenuService', (treeContextMenuService: UmbTreeContextMenuService) => {
+			this._treeContextMenuService = treeContextMenuService;
 		});
 
 		this.consumeContext('umbSectionContext', (sectionContext: UmbSectionContext) => {
@@ -88,7 +103,7 @@ export class UmbTreeNavigator extends UmbLitElement {
 		if (!this._sectionContext) return;
 
 		this.observe(this._sectionContext?.data, (section) => {
-			this._href = this._constructPath(section.meta.pathname, this._tree?.meta.rootNodeEntityType);
+			this._href = this._constructPath(section.meta.pathname, this._treeRootNode?.type);
 		});
 	}
 
@@ -97,15 +112,29 @@ export class UmbTreeNavigator extends UmbLitElement {
 		return type ? `section/${sectionPathname}/${type}` : undefined;
 	}
 
+	private _openActions() {
+		if (!this._treeContext || !this._sectionContext || !this._treeRootNode) return;
+
+		this._sectionContext?.setActiveTree(this._treeContext?.tree);
+		this._sectionContext?.setActiveTreeItem(this._treeRootNode);
+		this._treeContextMenuService?.open({ name: this._treeRootNode.name, key: this._treeRootNode.key });
+	}
+
 	render() {
+		// TODO: can we use tree item here instead so we don't have duplicated code?
 		// TODO: how do we know if a tree has children?
-		return html`<uui-menu-item
-			label="${ifDefined(this._tree?.meta.label)}"
+		return html` <uui-menu-item
+			label="${ifDefined(this._treeRootNode?.name)}"
 			@show-children=${this._onShowRoot}
 			href="${ifDefined(this._href)}"
 			has-children>
-			<uui-icon slot="icon" name="${ifDefined(this._tree?.meta.icon)}"></uui-icon>
 			${this._renderRootItems()}
+			<uui-icon slot="icon" name="${ifDefined(this._treeRootNode?.icon)}"></uui-icon>
+			<uui-action-bar slot="actions">
+				<uui-button @click=${this._openActions} label="Open actions menu">
+					<uui-symbol-more></uui-symbol-more>
+				</uui-button>
+			</uui-action-bar>
 		</uui-menu-item>`;
 	}