diff --git a/apps/files/composer/composer/autoload_classmap.php b/apps/files/composer/composer/autoload_classmap.php
index a005578aa2428..c99011b6a7caf 100644
--- a/apps/files/composer/composer/autoload_classmap.php
+++ b/apps/files/composer/composer/autoload_classmap.php
@@ -71,10 +71,12 @@
     'OCA\\Files\\Db\\TransferOwnershipMapper' => $baseDir . '/../lib/Db/TransferOwnershipMapper.php',
     'OCA\\Files\\DirectEditingCapabilities' => $baseDir . '/../lib/DirectEditingCapabilities.php',
     'OCA\\Files\\Event\\LoadAdditionalScriptsEvent' => $baseDir . '/../lib/Event/LoadAdditionalScriptsEvent.php',
+    'OCA\\Files\\Event\\LoadFilesApp' => $baseDir . '/../lib/Event/LoadFilesApp.php',
     'OCA\\Files\\Event\\LoadSearchPlugins' => $baseDir . '/../lib/Event/LoadSearchPlugins.php',
     'OCA\\Files\\Event\\LoadSidebar' => $baseDir . '/../lib/Event/LoadSidebar.php',
     'OCA\\Files\\Exception\\TransferOwnershipException' => $baseDir . '/../lib/Exception/TransferOwnershipException.php',
     'OCA\\Files\\Helper' => $baseDir . '/../lib/Helper.php',
+    'OCA\\Files\\Listener\\LoadFilesAppListener' => $baseDir . '/../lib/Listener/LoadFilesAppListener.php',
     'OCA\\Files\\Listener\\LoadSearchPluginsListener' => $baseDir . '/../lib/Listener/LoadSearchPluginsListener.php',
     'OCA\\Files\\Listener\\LoadSidebarListener' => $baseDir . '/../lib/Listener/LoadSidebarListener.php',
     'OCA\\Files\\Listener\\NodeAddedToFavoriteListener' => $baseDir . '/../lib/Listener/NodeAddedToFavoriteListener.php',
diff --git a/apps/files/composer/composer/autoload_static.php b/apps/files/composer/composer/autoload_static.php
index 6f0f0d4cc602f..d7c3e7c43a542 100644
--- a/apps/files/composer/composer/autoload_static.php
+++ b/apps/files/composer/composer/autoload_static.php
@@ -86,10 +86,12 @@ class ComposerStaticInitFiles
         'OCA\\Files\\Db\\TransferOwnershipMapper' => __DIR__ . '/..' . '/../lib/Db/TransferOwnershipMapper.php',
         'OCA\\Files\\DirectEditingCapabilities' => __DIR__ . '/..' . '/../lib/DirectEditingCapabilities.php',
         'OCA\\Files\\Event\\LoadAdditionalScriptsEvent' => __DIR__ . '/..' . '/../lib/Event/LoadAdditionalScriptsEvent.php',
+        'OCA\\Files\\Event\\LoadFilesApp' => __DIR__ . '/..' . '/../lib/Event/LoadFilesApp.php',
         'OCA\\Files\\Event\\LoadSearchPlugins' => __DIR__ . '/..' . '/../lib/Event/LoadSearchPlugins.php',
         'OCA\\Files\\Event\\LoadSidebar' => __DIR__ . '/..' . '/../lib/Event/LoadSidebar.php',
         'OCA\\Files\\Exception\\TransferOwnershipException' => __DIR__ . '/..' . '/../lib/Exception/TransferOwnershipException.php',
         'OCA\\Files\\Helper' => __DIR__ . '/..' . '/../lib/Helper.php',
+        'OCA\\Files\\Listener\\LoadFilesAppListener' => __DIR__ . '/..' . '/../lib/Listener/LoadFilesAppListener.php',
         'OCA\\Files\\Listener\\LoadSearchPluginsListener' => __DIR__ . '/..' . '/../lib/Listener/LoadSearchPluginsListener.php',
         'OCA\\Files\\Listener\\LoadSidebarListener' => __DIR__ . '/..' . '/../lib/Listener/LoadSidebarListener.php',
         'OCA\\Files\\Listener\\NodeAddedToFavoriteListener' => __DIR__ . '/..' . '/../lib/Listener/NodeAddedToFavoriteListener.php',
diff --git a/apps/files/lib/AppInfo/Application.php b/apps/files/lib/AppInfo/Application.php
index 56fcc6ce2c4aa..4dc4cb0ac9f47 100644
--- a/apps/files/lib/AppInfo/Application.php
+++ b/apps/files/lib/AppInfo/Application.php
@@ -24,8 +24,10 @@
 use OCA\Files\ConfigLexicon;
 use OCA\Files\Dashboard\FavoriteWidget;
 use OCA\Files\DirectEditingCapabilities;
+use OCA\Files\Event\LoadFilesApp;
 use OCA\Files\Event\LoadSearchPlugins;
 use OCA\Files\Event\LoadSidebar;
+use OCA\Files\Listener\LoadFilesAppListener;
 use OCA\Files\Listener\LoadSearchPluginsListener;
 use OCA\Files\Listener\LoadSidebarListener;
 use OCA\Files\Listener\NodeAddedToFavoriteListener;
@@ -80,6 +82,7 @@ public function register(IRegistrationContext $context): void {
 		$context->registerCapability(AdvancedCapabilities::class);
 		$context->registerCapability(DirectEditingCapabilities::class);
 
+		$context->registerEventListener(LoadFilesApp::class, LoadFilesAppListener::class);
 		$context->registerEventListener(LoadSidebar::class, LoadSidebarListener::class);
 		$context->registerEventListener(RenderReferenceEvent::class, RenderReferenceEventListener::class);
 		$context->registerEventListener(BeforeNodeRenamedEvent::class, SyncLivePhotosListener::class);
diff --git a/apps/files/lib/Controller/ViewController.php b/apps/files/lib/Controller/ViewController.php
index d826f6e8745aa..c76fcc9c6ba73 100644
--- a/apps/files/lib/Controller/ViewController.php
+++ b/apps/files/lib/Controller/ViewController.php
@@ -8,15 +8,9 @@
 
 namespace OCA\Files\Controller;
 
-use OC\Files\FilenameValidator;
 use OC\Files\Filesystem;
 use OCA\Files\AppInfo\Application;
-use OCA\Files\ConfigLexicon;
-use OCA\Files\Event\LoadAdditionalScriptsEvent;
-use OCA\Files\Event\LoadSearchPlugins;
-use OCA\Files\Event\LoadSidebar;
-use OCA\Files\Service\UserConfig;
-use OCA\Files\Service\ViewConfig;
+use OCA\Files\Event\LoadFilesApp;
 use OCP\App\IAppManager;
 use OCP\AppFramework\Controller;
 use OCP\AppFramework\Http\Attribute\NoAdminRequired;
@@ -26,21 +20,15 @@
 use OCP\AppFramework\Http\RedirectResponse;
 use OCP\AppFramework\Http\Response;
 use OCP\AppFramework\Http\TemplateResponse;
-use OCP\AppFramework\Services\IAppConfig;
 use OCP\AppFramework\Services\IInitialState;
-use OCP\Authentication\TwoFactorAuth\IRegistry;
-use OCP\Collaboration\Resources\LoadAdditionalScriptsEvent as ResourcesLoadAdditionalScriptsEvent;
 use OCP\EventDispatcher\IEventDispatcher;
 use OCP\Files\Folder;
 use OCP\Files\IRootFolder;
 use OCP\Files\NotFoundException;
-use OCP\Files\Template\ITemplateManager;
-use OCP\IConfig;
 use OCP\IL10N;
 use OCP\IRequest;
 use OCP\IURLGenerator;
 use OCP\IUserSession;
-use OCP\Util;
 
 /**
  * @package OCA\Files\Controller
@@ -53,18 +41,11 @@ public function __construct(
 		IRequest $request,
 		private IURLGenerator $urlGenerator,
 		private IL10N $l10n,
-		private IConfig $config,
 		private IEventDispatcher $eventDispatcher,
 		private IUserSession $userSession,
 		private IAppManager $appManager,
 		private IRootFolder $rootFolder,
 		private IInitialState $initialState,
-		private ITemplateManager $templateManager,
-		private UserConfig $userConfig,
-		private ViewConfig $viewConfig,
-		private FilenameValidator $filenameValidator,
-		private IRegistry $twoFactorRegistry,
-		private IAppConfig $appConfig,
 	) {
 		parent::__construct($appName, $request);
 	}
@@ -142,10 +123,6 @@ public function index($dir = '', $view = '', $fileid = null) {
 			}
 		}
 
-		// Load the files we need
-		Util::addInitScript('files', 'init');
-		Util::addScript('files', 'main');
-
 		$user = $this->userSession->getUser();
 		$userId = $user->getUID();
 
@@ -174,42 +151,8 @@ public function index($dir = '', $view = '', $fileid = null) {
 		}
 
 		$this->initialState->provideInitialState('storageStats', $storageInfo);
-		$this->initialState->provideInitialState('config', $this->userConfig->getConfigs());
-		$this->initialState->provideInitialState('viewConfigs', $this->viewConfig->getConfigs());
-		$this->initialState->provideInitialState('recent_limit', $this->appConfig->getAppValueInt(ConfigLexicon::RECENT_LIMIT, 100));
-		// Not yet consumed by the frontend, provided for future implementation
-		$this->initialState->provideInitialState('group_recent_files', $this->appConfig->getAppValueBool(ConfigLexicon::GROUP_RECENT_FILES, false));
-		$this->initialState->provideInitialState('recent_files_group_mime_types', $this->appConfig->getAppValueArray(ConfigLexicon::RECENT_FILES_GROUP_MIME_TYPES, []));
-		$this->initialState->provideInitialState('recent_files_group_timespan_minutes', $this->appConfig->getAppValueInt(ConfigLexicon::RECENT_FILES_GROUP_TIMESPAN_MINUTES, 2));
-
-		// File sorting user config
-		$filesSortingConfig = json_decode($this->config->getUserValue($userId, 'files', 'files_sorting_configs', '{}'), true);
-		$this->initialState->provideInitialState('filesSortingConfig', $filesSortingConfig);
-
-		// Forbidden file characters (deprecated use capabilities)
-		// TODO: Remove with next release of `@nextcloud/files`
-		$forbiddenCharacters = $this->filenameValidator->getForbiddenCharacters();
-		$this->initialState->provideInitialState('forbiddenCharacters', $forbiddenCharacters);
-
-		$event = new LoadAdditionalScriptsEvent();
-		$this->eventDispatcher->dispatchTyped($event);
-		$this->eventDispatcher->dispatchTyped(new ResourcesLoadAdditionalScriptsEvent());
-		$this->eventDispatcher->dispatchTyped(new LoadSidebar());
-		$this->eventDispatcher->dispatchTyped(new LoadSearchPlugins());
-
-		$this->initialState->provideInitialState('templates_enabled', true);
-		$this->initialState->provideInitialState('templates_path', $this->templateManager->hasTemplateDirectory() ? $this->templateManager->getTemplatePath() : false);
-		$this->initialState->provideInitialState('templates', $this->templateManager->listCreators());
-		$this->initialState->provideInitialState('localClientEnabled', $this->appConfig->getAppValueBool(ConfigLexicon::LOCAL_CLIENT_INTEGRATION));
-
-		$isTwoFactorEnabled = false;
-		foreach ($this->twoFactorRegistry->getProviderStates($user) as $providerId => $providerState) {
-			if ($providerId !== 'backup_codes' && $providerState === true) {
-				$isTwoFactorEnabled = true;
-			}
-		}
 
-		$this->initialState->provideInitialState('isTwoFactorEnabled', $isTwoFactorEnabled);
+		$this->eventDispatcher->dispatchTyped(new LoadFilesApp());
 
 		$response = new TemplateResponse(
 			Application::APP_ID,
diff --git a/apps/files/lib/Event/LoadFilesApp.php b/apps/files/lib/Event/LoadFilesApp.php
new file mode 100644
index 0000000000000..32da6fda6da09
--- /dev/null
+++ b/apps/files/lib/Event/LoadFilesApp.php
@@ -0,0 +1,21 @@
+<?php
+
+declare(strict_types=1);
+
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+namespace OCA\Files\Event;
+
+use OCP\EventDispatcher\Event;
+
+/**
+ * Dispatch this event from any page that needs to render the Files UI
+ * (e.g. via `OCP.Files.renderFilesApp()`) but is not served by the Files
+ * app's own controller. It triggers the same script/initial-state bootstrap
+ * that `files.view.index` performs.
+ */
+class LoadFilesApp extends Event {
+}
diff --git a/apps/files/lib/Listener/LoadFilesAppListener.php b/apps/files/lib/Listener/LoadFilesAppListener.php
new file mode 100644
index 0000000000000..dde2fd123f1ad
--- /dev/null
+++ b/apps/files/lib/Listener/LoadFilesAppListener.php
@@ -0,0 +1,102 @@
+<?php
+
+declare(strict_types=1);
+
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+namespace OCA\Files\Listener;
+
+use OC\Files\FilenameValidator;
+use OCA\Files\ConfigLexicon;
+use OCA\Files\Event\LoadAdditionalScriptsEvent;
+use OCA\Files\Event\LoadFilesApp;
+use OCA\Files\Event\LoadSearchPlugins;
+use OCA\Files\Event\LoadSidebar;
+use OCA\Files\Service\UserConfig;
+use OCA\Files\Service\ViewConfig;
+use OCP\AppFramework\Services\IAppConfig;
+use OCP\AppFramework\Services\IInitialState;
+use OCP\Authentication\TwoFactorAuth\IRegistry;
+use OCP\Collaboration\Resources\LoadAdditionalScriptsEvent as ResourcesLoadAdditionalScriptsEvent;
+use OCP\Config\IUserConfig;
+use OCP\EventDispatcher\Event;
+use OCP\EventDispatcher\IEventDispatcher;
+use OCP\EventDispatcher\IEventListener;
+use OCP\Files\Template\ITemplateManager;
+use OCP\IUserSession;
+use OCP\Util;
+
+/**
+ * Loads the Files app's frontend scripts and generic initial state so it can
+ * be rendered on any page, be it the Files app's own `files.view.index`
+ * route or a foreign page calling `OCP.Files.renderFilesApp()`.
+ *
+ * @template-implements IEventListener<LoadFilesApp>
+ */
+class LoadFilesAppListener implements IEventListener {
+	public function __construct(
+		private IEventDispatcher $eventDispatcher,
+		private IInitialState $initialState,
+		private IUserConfig $config,
+		private IUserSession $userSession,
+		private UserConfig $userConfig,
+		private ViewConfig $viewConfig,
+		private FilenameValidator $filenameValidator,
+		private IRegistry $twoFactorRegistry,
+		private IAppConfig $appConfig,
+		private ITemplateManager $templateManager,
+	) {
+	}
+
+	#[\Override]
+	public function handle(Event $event): void {
+		if (!($event instanceof LoadFilesApp)) {
+			return;
+		}
+
+		Util::addInitScript('files', 'init');
+		Util::addScript('files', 'main');
+
+		$user = $this->userSession->getUser();
+		$userId = $user->getUID();
+
+		$this->initialState->provideInitialState('config', $this->userConfig->getConfigs());
+		$this->initialState->provideInitialState('viewConfigs', $this->viewConfig->getConfigs());
+		$this->initialState->provideInitialState('recent_limit', $this->appConfig->getAppValueInt(ConfigLexicon::RECENT_LIMIT, 100));
+		// Not yet consumed by the frontend, provided for future implementation
+		$this->initialState->provideInitialState('group_recent_files', $this->appConfig->getAppValueBool(ConfigLexicon::GROUP_RECENT_FILES, false));
+		$this->initialState->provideInitialState('recent_files_group_mime_types', $this->appConfig->getAppValueArray(ConfigLexicon::RECENT_FILES_GROUP_MIME_TYPES, []));
+		$this->initialState->provideInitialState('recent_files_group_timespan_minutes', $this->appConfig->getAppValueInt(ConfigLexicon::RECENT_FILES_GROUP_TIMESPAN_MINUTES, 2));
+
+		// File sorting user config
+		$filesSortingConfig = json_decode($this->config->getValueString($userId, 'files', 'files_sorting_configs', '{}'), true);
+		$this->initialState->provideInitialState('filesSortingConfig', $filesSortingConfig);
+
+		// Forbidden file characters (deprecated use capabilities)
+		// TODO: Remove with next release of `@nextcloud/files`
+		$forbiddenCharacters = $this->filenameValidator->getForbiddenCharacters();
+		$this->initialState->provideInitialState('forbiddenCharacters', $forbiddenCharacters);
+
+		$this->eventDispatcher->dispatchTyped(new LoadAdditionalScriptsEvent());
+		$this->eventDispatcher->dispatchTyped(new ResourcesLoadAdditionalScriptsEvent());
+		$this->eventDispatcher->dispatchTyped(new LoadSidebar());
+		$this->eventDispatcher->dispatchTyped(new LoadSearchPlugins());
+
+		$this->initialState->provideInitialState('templates_enabled', true);
+		$this->initialState->provideInitialState('templates_path', $this->templateManager->hasTemplateDirectory() ? $this->templateManager->getTemplatePath() : false);
+		$this->initialState->provideInitialState('templates', $this->templateManager->listCreators());
+		$this->initialState->provideInitialState('localClientEnabled', $this->appConfig->getAppValueBool(ConfigLexicon::LOCAL_CLIENT_INTEGRATION));
+
+		$isTwoFactorEnabled = false;
+		foreach ($this->twoFactorRegistry->getProviderStates($user) as $providerId => $providerState) {
+			if ($providerId !== 'backup_codes' && $providerState === true) {
+				$isTwoFactorEnabled = true;
+			}
+		}
+
+		$this->initialState->provideInitialState('isTwoFactorEnabled', $isTwoFactorEnabled);
+	}
+}
diff --git a/apps/files/src/components/BreadCrumbs.vue b/apps/files/src/components/BreadCrumbs.vue
index 567aecd337981..a2a1a3612d978 100644
--- a/apps/files/src/components/BreadCrumbs.vue
+++ b/apps/files/src/components/BreadCrumbs.vue
@@ -83,6 +83,7 @@ import { useFilesStore } from '../store/files.ts'
 import { usePathsStore } from '../store/paths.ts'
 import { useSelectionStore } from '../store/selection.ts'
 import { useUploaderStore } from '../store/uploader.ts'
+import { getBreadcrumbDirs } from '../utils/breadcrumbs.ts'
 import { logger } from '../utils/logger.ts'
 
 export default defineComponent({
@@ -100,6 +101,12 @@ export default defineComponent({
 			type: String,
 			default: '/',
 		},
+
+		/** The directory to start the breadcrumbs with */
+		root: {
+			type: String,
+			default: '/',
+		},
 	},
 
 	emits: ['reload'],
@@ -159,11 +166,7 @@ export default defineComponent({
 
 	computed: {
 		dirs(): string[] {
-			const cumulativePath = (acc: string) => (value: string) => (acc += `${value}/`)
-			// Generate a cumulative path for each path segment: ['/', '/foo', '/foo/bar', ...] etc
-			const paths: string[] = this.path.split('/').filter(Boolean).map(cumulativePath('/'))
-			// Strip away trailing slash
-			return ['/', ...paths.map((path: string) => path.replace(/^(.+)\/$/, '$1'))]
+			return getBreadcrumbDirs(this.path, this.root)
 		},
 
 		sections() {
diff --git a/apps/files/src/components/FileEntry/FileEntryActions.vue b/apps/files/src/components/FileEntry/FileEntryActions.vue
index f6c948789c1b7..82703e12c6193 100644
--- a/apps/files/src/components/FileEntry/FileEntryActions.vue
+++ b/apps/files/src/components/FileEntry/FileEntryActions.vue
@@ -374,7 +374,7 @@ export default defineComponent({
 <style lang="scss">
 // Allow right click to define the position of the menu
 // only if defined
-main.app-content[style*="mouse-pos-x"] .v-popper__popper {
+.app-content[style*="mouse-pos-x"] .v-popper__popper {
 	transform: translate3d(var(--mouse-pos-x), var(--mouse-pos-y), 0px) !important;
 
 	// If the menu is too close to the bottom, we move it up
diff --git a/apps/files/src/components/FileEntryGrid.spec.ts b/apps/files/src/components/FileEntryGrid.spec.ts
index dddc47b8d451b..ead1147935680 100644
--- a/apps/files/src/components/FileEntryGrid.spec.ts
+++ b/apps/files/src/components/FileEntryGrid.spec.ts
@@ -9,7 +9,7 @@ import { shallowMount } from '@vue/test-utils'
 import { beforeEach, describe, expect, test, vi } from 'vitest'
 import { nextTick, toRaw } from 'vue'
 import FileEntryGrid from './FileEntryGrid.vue'
-import { router } from '../router/router.ts'
+import { getFilesAppRouter } from '../router/router.ts'
 import { useActiveStore } from '../store/active.ts'
 
 // useFileListWidth builds its ResizeObserver while the module is evaluated, so
@@ -25,6 +25,8 @@ vi.hoisted(() => {
 
 vi.mock('@nextcloud/auth')
 
+const router = getFilesAppRouter()
+
 const source = new File({
 	id: 42,
 	source: 'http://nextcloud.local/remote.php/dav/files/test/Deep/Nested/report.pdf',
diff --git a/apps/files/src/components/FileEntryMixin.ts b/apps/files/src/components/FileEntryMixin.ts
index 381a4e2f276a4..418f5ef734ec2 100644
--- a/apps/files/src/components/FileEntryMixin.ts
+++ b/apps/files/src/components/FileEntryMixin.ts
@@ -275,7 +275,7 @@ export default defineComponent({
 			if (this.actionsMenuStore.opened === null) {
 				// Reset any right menu position potentially set
 				logger.debug('All actions menu closed, resetting right menu position...')
-				const root = this.$el?.closest('main.app-content') as HTMLElement
+				const root = this.$el?.closest('.app-content') as HTMLElement
 				if (root !== null) {
 					root.style.removeProperty('--mouse-pos-x')
 					root.style.removeProperty('--mouse-pos-y')
@@ -313,7 +313,7 @@ export default defineComponent({
 			// the actions menu mouse position
 			if (!this.gridMode) {
 				// Actions menu is contained within the app content
-				const root = this.$el?.closest('main.app-content') as HTMLElement
+				const root = this.$el?.closest('.app-content') as HTMLElement
 				const contentRect = root.getBoundingClientRect()
 				// Using Math.min/max to prevent the menu from going out of the AppContent
 				// 200 = max width of the menu
@@ -322,7 +322,7 @@ export default defineComponent({
 				root.style.setProperty('--mouse-pos-y', Math.max(0, event.clientY - contentRect.top) + 'px')
 			} else {
 				// Reset any right menu position potentially set
-				const root = this.$el?.closest('main.app-content') as HTMLElement
+				const root = this.$el?.closest('.app-content') as HTMLElement
 				root.style.removeProperty('--mouse-pos-x')
 				root.style.removeProperty('--mouse-pos-y')
 			}
diff --git a/apps/files/src/main.ts b/apps/files/src/main.ts
index 0427007b9db71..2e0028f138619 100644
--- a/apps/files/src/main.ts
+++ b/apps/files/src/main.ts
@@ -7,7 +7,8 @@ import { isPublicShare } from '@nextcloud/sharing/public'
 import { createApp } from 'vue'
 import FilesApp from './FilesApp.vue'
 import SettingsModel from './models/Setting.ts'
-import { router } from './router/router.ts'
+import { getFilesAppRouter } from './router/router.ts'
+import { renderFilesView } from './services/renderFilesView.ts'
 import RouterService from './services/RouterService.ts'
 import SettingsService from './services/Settings.js'
 import { setSidebarDataProvider } from './sidebar/provider.ts'
@@ -21,12 +22,21 @@ import 'vite/modulepreload-polyfill'
 window.OCA.Files = window.OCA.Files ?? {}
 window.OCP.Files = window.OCP.Files ?? {}
 
-// Expose router
-if (!window.OCP.Files.Router) {
-	const Router = new RouterService(router)
+// Other apps load this same script to get `OCP.Files.renderFilesApp()`.
+// Only take over `#content` when we are actually on the Files app's own
+// page - identifiable by the app-specific class core's layout adds to it.
+const contentEl = document.getElementById('content')
+const isFilesAppPage = contentEl?.classList.contains('app-files') ?? false
+
+// Expose router, foreign pages get one per embedded file list
+if (isFilesAppPage && !window.OCP.Files.Router) {
+	const Router = new RouterService(getFilesAppRouter())
 	Object.assign(window.OCP.Files, { Router })
 }
 
+// Expose the ability to render the Files UI on a foreign page
+window.OCP.Files.renderFilesApp ??= renderFilesView
+
 // The files app renders the sidebar itself, so it also provides the sidebar data.
 // Same condition as for rendering it in `FilesApp.vue`.
 if (!isPublicShare()) {
@@ -39,7 +49,9 @@ const Settings = new SettingsService()
 Object.assign(window.OCA.Files, { Settings })
 Object.assign(window.OCA.Files.Settings, { Setting: SettingsModel })
 
-const app = createApp(FilesApp)
-app.use(pinia)
-app.use((window.OCP.Files.Router as RouterService)._router)
-app.mount('#content')
+if (isFilesAppPage) {
+	const app = createApp(FilesApp)
+	app.use(pinia)
+	app.use((window.OCP.Files.Router as RouterService)._router)
+	app.mount(contentEl!)
+}
diff --git a/apps/files/src/router/router.spec.ts b/apps/files/src/router/router.spec.ts
index 8e3236776df5e..72e01aa851ecb 100644
--- a/apps/files/src/router/router.spec.ts
+++ b/apps/files/src/router/router.spec.ts
@@ -9,7 +9,7 @@ import { emit } from '@nextcloud/event-bus'
 import { File, Folder } from '@nextcloud/files'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import RouterService from '../services/RouterService.ts'
-import { router } from './router.ts'
+import { getFilesAppRouter } from './router.ts'
 
 const stores = vi.hoisted(() => ({
 	getPath: vi.fn(),
@@ -38,7 +38,21 @@ const deletedFile = new File({
 	source: 'https://cloud.example.com/remote.php/dav/files/test/folder/other',
 })
 
+describe('Router: Files app router', () => {
+	it('is created once on first use', () => {
+		expect(getFilesAppRouter()).toBe(getFilesAppRouter())
+	})
+
+	it('ignores deleted nodes on pages without a file list', () => {
+		window.OCP = { Files: {} } as unknown as typeof window.OCP
+
+		expect(() => emit('files:node:deleted', deletedFile)).not.toThrow()
+		expect(stores.getPath).not.toHaveBeenCalled()
+	})
+})
+
 describe('Router: deleting the current file', () => {
+	const router = getFilesAppRouter()
 	let service: RouterService
 
 	beforeEach(async () => {
diff --git a/apps/files/src/router/router.ts b/apps/files/src/router/router.ts
index f566dd97e69f8..e57c8f61e2e11 100644
--- a/apps/files/src/router/router.ts
+++ b/apps/files/src/router/router.ts
@@ -4,11 +4,12 @@
  */
 
 import type { INode } from '@nextcloud/files'
+import type { Router, RouterHistory } from 'vue-router'
 
 import { subscribe } from '@nextcloud/event-bus'
 import { generateUrl } from '@nextcloud/router'
 import { relative } from 'path'
-import { createRouter, createWebHistory, isNavigationFailure, NavigationFailureType, stringifyQuery } from 'vue-router'
+import { createRouter as createVueRouter, createWebHistory, isNavigationFailure, NavigationFailureType, stringifyQuery } from 'vue-router'
 import { useFilesStore } from '../store/files.ts'
 import { pinia } from '../store/index.ts'
 import { usePathsStore } from '../store/paths.ts'
@@ -28,94 +29,126 @@ function stringifyNextcloudQuery(query: Parameters<typeof stringifyQuery>[0]): s
 	return stringifyQuery(query).replace(/\+/g, '%20')
 }
 
-export const router = createRouter({
-	// if index.php is in the url AND we got this far, then it's working:
-	// let's keep using index.php in the url
-	history: createWebHistory(generateUrl('/apps/files')),
-	linkActiveClass: 'active',
-	stringifyQuery: stringifyNextcloudQuery,
-	routes: [
-		{
-			path: '/',
-			// Pretending we're using the default view
-			redirect: { name: 'filelist', params: { view: defaultView() } },
-		},
-		{
-			path: '/:view/:fileid(\\d+)?',
-			name: 'filelist',
-			props: true,
-			component: FilesListComponent,
-		},
-	],
-})
-
-// Handle aborted navigation (NavigationGuards) gracefully
-router.onError((error) => {
-	if (isNavigationFailure(error, NavigationFailureType.aborted)) {
-		logger.debug('Navigation was aborted', { error })
-	} else {
-		throw error
-	}
-})
-
-// If navigating back from a folder to a parent folder,
-// we need to keep the current dir fileid so it's highlighted
-// and scrolled into view.
-router.beforeResolve((to, from) => {
-	if (to.params.view !== from.params.view) {
-		// skip if different views
-		return
-	}
-
-	const fromDir = (from.query?.dir || '/') as string
-	const toDir = (to.query?.dir || '/') as string
-
-	// We are going back to a parent directory
-	if (relative(fromDir, toDir) === '..') {
-		const { getNode } = useFilesStore()
-		const { getPath } = usePathsStore()
+/**
+ * Create a router for the Files app or an embedded Files view.
+ *
+ * @param history Browser or in-memory history for this router instance
+ */
+export function createFilesRouter(history: RouterHistory = createWebHistory(generateUrl('/apps/files'))) {
+	const filesRouter = createVueRouter({
+		// if index.php is in the url AND we got this far, then it's working:
+		// let's keep using index.php in the url
+		history,
+		linkActiveClass: 'active',
+		stringifyQuery: stringifyNextcloudQuery,
+		routes: [
+			{
+				path: '/',
+				// Pretending we're using the default view
+				redirect: { name: 'filelist', params: { view: defaultView() } },
+			},
+			{
+				path: '/:view/:fileid(\\d+)?',
+				name: 'filelist',
+				props: true,
+				component: FilesListComponent,
+			},
+		],
+	})
+	configureFilesRouter(filesRouter)
+	return filesRouter
+}
 
-		if (!from.params.view) {
-			logger.error('No current view id found, cannot navigate to parent directory', { fromDir, toDir })
-			return
+/**
+ * Register Files-specific navigation handling on a router instance.
+ *
+ * @param filesRouter Router instance to configure
+ */
+function configureFilesRouter(filesRouter: Router): void {
+	// Handle aborted navigation (NavigationGuards) gracefully
+	filesRouter.onError((error) => {
+		if (isNavigationFailure(error, NavigationFailureType.aborted)) {
+			logger.debug('Navigation was aborted', { error })
+		} else {
+			throw error
 		}
+	})
 
-		// Get the previous parent's file id
-		const fromSource = getPath(from.params.view as string, fromDir)
-		if (!fromSource) {
-			logger.error('No source found for the parent directory', { fromDir, toDir })
+	// If navigating to a parent folder, keep the current file highlighted.
+	filesRouter.beforeResolve((to, from) => {
+		if (to.params.view !== from.params.view) {
+			// Skip if navigating to a different view.
 			return
 		}
 
-		const fileId = getNode(fromSource)?.fileid
-		if (to.params.fileid === String(fileId)) {
-			// prevent infinite loop of navigating to the same parent directory
-			return
+		const fromDir = (from.query?.dir || '/') as string
+		const toDir = (to.query?.dir || '/') as string
+
+		// We are going back to a parent directory
+		if (relative(fromDir, toDir) === '..') {
+			const { getNode } = useFilesStore()
+			const { getPath } = usePathsStore()
+
+			if (!from.params.view) {
+				logger.error('No current view id found, cannot navigate to parent directory', { fromDir, toDir })
+				return
+			}
+
+			// Get the previous parent's file id
+			const fromSource = getPath(from.params.view as string, fromDir)
+			if (!fromSource) {
+				logger.error('No source found for the parent directory', { fromDir, toDir })
+				return
+			}
+
+			const fileId = getNode(fromSource)?.fileid
+			if (to.params.fileid === String(fileId)) {
+				// Prevent navigating repeatedly to the same parent directory.
+				return
+			}
+
+			if (!fileId) {
+				logger.error('No fileid found for the parent directory', { fromDir, toDir, fromSource })
+				return
+			}
+
+			logger.debug('Navigating back to parent directory', { fromDir, toDir, fileId })
+			return {
+				name: 'filelist',
+				query: to.query,
+				params: {
+					...to.params,
+					fileid: String(fileId),
+				},
+				// Replace the current history entry
+				replace: true,
+			}
 		}
+	})
+}
 
-		if (!fileId) {
-			logger.error('No fileid found for the parent directory', { fromDir, toDir, fromSource })
-			return
-		}
+let filesAppRouter: Router | undefined
 
-		logger.debug('Navigating back to parent directory', { fromDir, toDir, fileId })
-		return {
-			name: 'filelist',
-			query: to.query,
-			params: {
-				...to.params,
-				fileid: String(fileId),
-			},
-			// Replace the current history entry
-			replace: true,
-		}
-	}
-})
+/**
+ * Get the router of the Files app's own page.
+ *
+ * Created on first use, as creating a browser history router
+ * rewrites the URL of the current page.
+ */
+export function getFilesAppRouter(): Router {
+	filesAppRouter ??= createFilesRouter()
+	return filesAppRouter
+}
 
 // Navigate through the router service, so stores reacting to the same deletion
 // (e.g. the sidebar closing) build on this navigation instead of the outdated route.
 subscribe('files:node:deleted', (node: INode) => {
 	const { Router } = window.OCP.Files
+	// no file list is rendered on the current page
+	if (!Router) {
+		return
+	}
+
 	if (Router.params.fileid === String(node.fileid)) {
 		const params = { ...Router.params }
 		const { getPath } = usePathsStore(pinia)
diff --git a/apps/files/src/services/renderFilesView.spec.ts b/apps/files/src/services/renderFilesView.spec.ts
new file mode 100644
index 0000000000000..59f6cd99f63ab
--- /dev/null
+++ b/apps/files/src/services/renderFilesView.spec.ts
@@ -0,0 +1,175 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type RouterService from './RouterService.ts'
+
+import { getNavigation, View } from '@nextcloud/files'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { h } from 'vue'
+import { mountSidebar, unmountSidebar } from '../sidebar/mount.ts'
+import { renderFilesView } from './renderFilesView.ts'
+
+const VIEW_ID = 'test-view'
+const renderedViews: Array<ReturnType<typeof renderFilesView>> = []
+
+function mountFilesView(el: HTMLElement, options?: Parameters<typeof renderFilesView>[2]) {
+	const rendered = renderFilesView(el, VIEW_ID, options)
+	renderedViews.push(rendered)
+	return rendered
+}
+
+vi.mock('../sidebar/mount.ts', () => ({
+	mountSidebar: vi.fn(() => true),
+	unmountSidebar: vi.fn(),
+}))
+
+vi.mock('../views/FilesList.vue', () => ({
+	default: {
+		name: 'FilesList',
+		props: { embedded: { type: Boolean, default: false }, rootDir: { type: String, default: '/' } },
+		render() {
+			return h('div', { id: 'files-list-stub', 'data-embedded': String(this.embedded), 'data-root-dir': this.rootDir })
+		},
+	},
+}))
+
+describe('renderFilesView', () => {
+	beforeEach(() => {
+		vi.clearAllMocks()
+		document.body.innerHTML = ''
+		window.OCP = { Files: { Router: {} as RouterService } } as unknown as typeof window.OCP
+		renderedViews.length = 0
+		getNavigation().register(new View({
+			id: VIEW_ID,
+			name: 'Test view',
+			icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" /></svg>',
+			getContents: async () => ({ folder: {} as never, contents: [] }),
+		}))
+	})
+
+	afterEach(() => {
+		for (const rendered of renderedViews) {
+			rendered.destroy()
+		}
+		getNavigation().remove(VIEW_ID)
+	})
+
+	it('mounts only the file list, embedded, into the given element', async () => {
+		const el = document.createElement('div')
+		document.body.appendChild(el)
+
+		mountFilesView(el)
+
+		const stub = await vi.waitFor(() => {
+			const stub = document.body.querySelector('#files-list-stub')
+			expect(stub).not.toBeNull()
+			return stub
+		})
+		expect(stub?.getAttribute('data-embedded')).toBe('true')
+	})
+
+	it('activates the requested view without touching the browser URL', () => {
+		const el = document.createElement('div')
+		document.body.appendChild(el)
+		const before = window.location.href
+
+		mountFilesView(el)
+
+		expect(window.location.href).toBe(before)
+		expect(getNavigation().active?.id).toBe(VIEW_ID)
+	})
+
+	it('routes embedded navigation in memory and restores the previous router on destroy', async () => {
+		const el = document.createElement('div')
+		document.body.appendChild(el)
+		const previousRouter = window.OCP.Files.Router
+		const before = window.location.href
+
+		const rendered = mountFilesView(el)
+		await window.OCP.Files.Router.goToRoute('filelist', { view: VIEW_ID })
+
+		expect(window.location.href).toBe(before)
+		expect(window.OCP.Files.Router).not.toBe(previousRouter)
+
+		rendered.destroy()
+		expect(window.OCP.Files.Router).toBe(previousRouter)
+	})
+
+	it('returns a handle that unmounts the file list', async () => {
+		const el = document.createElement('div')
+		document.body.appendChild(el)
+
+		const rendered = mountFilesView(el)
+		await vi.waitFor(() => expect(document.body.querySelector('#files-list-stub')).not.toBeNull())
+		rendered.destroy()
+
+		expect(document.body.querySelector('#files-list-stub')).toBeNull()
+	})
+
+	it('rejects another embed while one is active and allows one after destroy', () => {
+		const firstEl = document.createElement('div')
+		const secondEl = document.createElement('div')
+		document.body.append(firstEl, secondEl)
+		const previousRouter = window.OCP.Files.Router
+		const rendered = mountFilesView(firstEl)
+		const embeddedRouter = window.OCP.Files.Router
+
+		expect(() => renderFilesView(secondEl, VIEW_ID)).toThrow('Only one embedded Files view can be active at a time')
+		expect(window.OCP.Files.Router).toBe(embeddedRouter)
+
+		rendered.destroy()
+		expect(window.OCP.Files.Router).toBe(previousRouter)
+		const secondRendered = mountFilesView(secondEl)
+		secondRendered.destroy()
+	})
+
+	it('opens the requested directory', async () => {
+		const el = document.createElement('div')
+		document.body.appendChild(el)
+
+		mountFilesView(el, { dir: '/Team folder' })
+
+		await vi.waitFor(() => expect(window.OCP.Files.Router.query).toEqual({ dir: '/Team folder' }))
+		expect(window.OCP.Files.Router.params).toMatchObject({ view: VIEW_ID })
+	})
+
+	it('starts the breadcrumbs with the root directory and opens it', async () => {
+		const el = document.createElement('div')
+		document.body.appendChild(el)
+
+		mountFilesView(el, { rootDir: '/Team folder' })
+
+		const stub = await vi.waitFor(() => {
+			const stub = document.body.querySelector('#files-list-stub')
+			expect(stub).not.toBeNull()
+			return stub
+		})
+		expect(stub?.getAttribute('data-root-dir')).toBe('/Team folder')
+		await vi.waitFor(() => expect(window.OCP.Files.Router.query).toEqual({ dir: '/Team folder' }))
+	})
+
+	it('does not render the sidebar unless an element is given', () => {
+		const el = document.createElement('div')
+		document.body.appendChild(el)
+
+		mountFilesView(el).destroy()
+
+		expect(mountSidebar).not.toHaveBeenCalled()
+		expect(unmountSidebar).not.toHaveBeenCalled()
+	})
+
+	it('renders the sidebar into the given element and removes it on destroy', () => {
+		const el = document.createElement('div')
+		const sidebarEl = document.createElement('div')
+		document.body.append(el, sidebarEl)
+
+		const rendered = mountFilesView(el, { sidebarEl })
+		expect(mountSidebar).toHaveBeenCalledWith(sidebarEl)
+		expect(unmountSidebar).not.toHaveBeenCalled()
+
+		rendered.destroy()
+		expect(unmountSidebar).toHaveBeenCalledOnce()
+	})
+})
diff --git a/apps/files/src/services/renderFilesView.ts b/apps/files/src/services/renderFilesView.ts
new file mode 100644
index 0000000000000..c136e2a58c359
--- /dev/null
+++ b/apps/files/src/services/renderFilesView.ts
@@ -0,0 +1,100 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { getNavigation } from '@nextcloud/files'
+import { createApp, defineAsyncComponent } from 'vue'
+import { createMemoryHistory } from 'vue-router'
+import { createFilesRouter } from '../router/router.ts'
+import { mountSidebar, unmountSidebar } from '../sidebar/mount.ts'
+import { pinia } from '../store/index.ts'
+import { useSidebarStore } from '../store/sidebar.ts'
+import RouterService from './RouterService.ts'
+
+let activeRouterService: RouterService | undefined
+
+/** Handle returned by `renderFilesView()` to tear down the embedded instance. */
+export interface RenderedFilesView {
+	/** Unmount the file list and free the DOM node it was rendered into. */
+	destroy: () => void
+}
+
+export interface RenderFilesViewOptions {
+	/** The directory to open initially, defaults to `rootDir` */
+	dir?: string
+	/** The directory the breadcrumbs start with, e.g. a folder the view is scoped to */
+	rootDir?: string
+	/** Element to render the Files sidebar into, it should take part in the layout of `NcContent` */
+	sidebarEl?: HTMLElement
+}
+
+/**
+ * Render only the Files file list (breadcrumbs, toolbar, file list) into a
+ * foreign DOM element, activating the given Files navigation view.
+ *
+ * This never renders `NcContent` or `NcAppContent` - those belong to the
+ * Files app's own page chrome (see `FilesApp.vue`) and are skipped here so
+ * the file list can be embedded as a widget inside another app's page.
+ *
+ * The host page must dispatch `OCA\Files\Event\LoadFilesApp` server-side
+ * beforehand so the Files app's scripts and initial state are loaded, and
+ * the target view must already be registered via `getNavigation().register()`.
+ *
+ * Exposed as `OCP.Files.renderFilesApp()`.
+ * Only one embedded Files view can be active at a time.
+ *
+ * @param el the element to mount the file list into
+ * @param viewId the id of the Files navigation view to display
+ * @param options additional rendering options
+ */
+export function renderFilesView(el: HTMLElement, viewId: string, options: RenderFilesViewOptions = {}): RenderedFilesView {
+	if (activeRouterService) {
+		throw new Error('Only one embedded Files view can be active at a time')
+	}
+
+	const router = createFilesRouter(createMemoryHistory())
+	const previousRouterService = window.OCP.Files.Router
+	const routerService = new RouterService(router)
+	// Lazy-loaded like in the router, so its CSS is applied after the shared component styles
+	const FilesList = defineAsyncComponent(() => import('../views/FilesList.vue').then((module) => module.default))
+	const app = createApp(FilesList, { embedded: true, rootDir: options.rootDir })
+	app.use(pinia)
+	app.use(router)
+	window.OCP.Files.Router = routerService
+	activeRouterService = routerService
+	try {
+		app.mount(el)
+	} catch (error) {
+		window.OCP.Files.Router = previousRouterService
+		activeRouterService = undefined
+		throw error
+	}
+
+	// Normally done by the navigation sidebar's route watcher; there is none
+	// here, so keep the active view in sync ourselves.
+	getNavigation().setActive(viewId)
+	const dir = options.dir ?? options.rootDir
+	const query = dir ? { dir } : {}
+	void router.push({ name: 'filelist', params: { view: viewId }, query }).catch(() => {})
+
+	const renderedSidebar = options.sidebarEl !== undefined && mountSidebar(options.sidebarEl)
+
+	return {
+		destroy: () => {
+			if (activeRouterService !== routerService) {
+				return
+			}
+
+			if (renderedSidebar) {
+				useSidebarStore(pinia).close()
+				unmountSidebar()
+			}
+			app.unmount()
+			if (window.OCP.Files.Router === routerService) {
+				window.OCP.Files.Router = previousRouterService
+			}
+			activeRouterService = undefined
+		},
+	}
+}
diff --git a/apps/files/src/sidebar/mount.spec.ts b/apps/files/src/sidebar/mount.spec.ts
index b55fa2e5b8b17..6874a8453e290 100644
--- a/apps/files/src/sidebar/mount.spec.ts
+++ b/apps/files/src/sidebar/mount.spec.ts
@@ -4,7 +4,7 @@
  */
 
 import type { logger as Logger } from '../utils/logger.ts'
-import type { isSidebarMounted as IsSidebarMounted, mountSidebar as MountSidebar } from './mount.ts'
+import type { isSidebarMounted as IsSidebarMounted, mountSidebar as MountSidebar, unmountSidebar as UnmountSidebar } from './mount.ts'
 
 import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, test, vi } from 'vitest'
@@ -13,6 +13,7 @@ vi.mock('@nextcloud/auth')
 
 // the sidebar is only rendered once per page, so every test needs a fresh state
 let mountSidebar: typeof MountSidebar
+let unmountSidebar: typeof UnmountSidebar
 let isSidebarMounted: typeof IsSidebarMounted
 let logger: typeof Logger
 
@@ -38,7 +39,7 @@ describe('Sidebar rendering', () => {
 		document.body.innerHTML = '';
 
 		({ logger } = await import('../utils/logger.ts'));
-		({ isSidebarMounted, mountSidebar } = await import('./mount.ts'))
+		({ isSidebarMounted, mountSidebar, unmountSidebar } = await import('./mount.ts'))
 	})
 
 	test('is not rendered by default', () => {
@@ -87,4 +88,23 @@ describe('Sidebar rendering', () => {
 		expect(content.querySelector('aside')).toBeNull()
 		expect(target.querySelector('aside')).not.toBeNull()
 	})
+
+	test('is removed again', () => {
+		const content = buildPageContent()
+
+		mountSidebar(content)
+		unmountSidebar()
+
+		expect(isSidebarMounted()).toBe(false)
+		expect(content.children).toHaveLength(0)
+
+		// can be rendered again afterwards
+		expect(mountSidebar(content)).toBe(true)
+		expect(content.querySelector('aside')).not.toBeNull()
+	})
+
+	test('ignores removing a sidebar which is not rendered', () => {
+		expect(() => unmountSidebar()).not.toThrow()
+		expect(isSidebarMounted()).toBe(false)
+	})
 })
diff --git a/apps/files/src/sidebar/mount.ts b/apps/files/src/sidebar/mount.ts
index fc5a961dfe75e..fa424ff20d55f 100644
--- a/apps/files/src/sidebar/mount.ts
+++ b/apps/files/src/sidebar/mount.ts
@@ -53,3 +53,18 @@ export function mountSidebar(target: HTMLElement): boolean {
 	logger.debug('sidebar: rendered within the current app')
 	return true
 }
+
+/**
+ * Remove the sidebar from the page, if it is rendered.
+ */
+export function unmountSidebar(): void {
+	const state = getSidebarSharedState()
+	if (state.instance === undefined) {
+		return
+	}
+
+	state.instance.app.unmount()
+	state.instance.mountpoint.remove()
+	state.instance = undefined
+	logger.debug('sidebar: removed from the current app')
+}
diff --git a/apps/files/src/sidebar/providers/filesStore.spec.ts b/apps/files/src/sidebar/providers/filesStore.spec.ts
index d9fddfaa86488..46cf47bb80109 100644
--- a/apps/files/src/sidebar/providers/filesStore.spec.ts
+++ b/apps/files/src/sidebar/providers/filesStore.spec.ts
@@ -162,5 +162,26 @@ describe('Files app sidebar data provider', () => {
 			provider.onOpenStateChanged!(false)
 			expect(router.goToRoute).not.toHaveBeenCalled()
 		})
+
+		test('closes when the "opendetails" parameter is removed, also for a later router', () => {
+			const createVueRouter = () => ({ afterEach: vi.fn() })
+			const firstRouter = createVueRouter()
+			const secondRouter = createVueRouter()
+
+			Object.assign(router, { _router: firstRouter })
+			emit('files:list:updated', {} as never)
+			emit('files:list:updated', {} as never)
+			expect(firstRouter.afterEach).toHaveBeenCalledOnce()
+
+			// e.g. a file list embedded again into another app
+			Object.assign(router, { _router: secondRouter })
+			emit('files:list:updated', {} as never)
+			expect(secondRouter.afterEach).toHaveBeenCalledOnce()
+
+			useSidebarStore(pinia).open(node)
+			const hook = secondRouter.afterEach.mock.calls[0][0]
+			hook({ query: {} }, { query: { opendetails: 'true' } })
+			expect(useSidebarStore(pinia).isOpen).toBe(false)
+		})
 	})
 })
diff --git a/apps/files/src/sidebar/providers/filesStore.ts b/apps/files/src/sidebar/providers/filesStore.ts
index facbb4df87d4f..3c12eaa9973fc 100644
--- a/apps/files/src/sidebar/providers/filesStore.ts
+++ b/apps/files/src/sidebar/providers/filesStore.ts
@@ -77,16 +77,18 @@ export function createFilesStoreDataProvider(pinia: Pinia = filesPinia): ISideba
 		}
 	}
 
-	let routerHookRegistered = false
+	let hookedRouter: unknown
 	// close the sidebar when the `opendetails` parameter is removed from the URL,
 	// the router is only available once the files app is mounted
+	// and embedded file lists bring their own router
 	subscribe('files:list:updated', () => {
-		if (routerHookRegistered) {
+		const router = window.OCP.Files.Router._router
+		if (hookedRouter === router) {
 			return
 		}
 
-		routerHookRegistered = true
-		window.OCP.Files.Router._router.afterEach((to, from) => {
+		hookedRouter = router
+		router.afterEach((to, from) => {
 			if ((from.query && ('opendetails' in from.query))
 				&& (to.query && !('opendetails' in to.query))) {
 				logger.debug('sidebar: closing because "opendetails" query parameter was removed from URL.')
diff --git a/apps/files/src/store/search.spec.ts b/apps/files/src/store/search.spec.ts
new file mode 100644
index 0000000000000..e5000bf464d24
--- /dev/null
+++ b/apps/files/src/store/search.spec.ts
@@ -0,0 +1,41 @@
+/*!
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { emit as Emit } from '@nextcloud/event-bus'
+
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+
+vi.mock('@nextcloud/event-bus', () => ({ emit: vi.fn(), subscribe: vi.fn() }))
+
+let emit: typeof Emit
+
+describe('Search store on pages without a file list', () => {
+	beforeEach(async () => {
+		vi.resetModules()
+		setActivePinia(createPinia())
+		// other apps can load the files scripts without rendering a file list
+		window.OCP = { Files: {} } as unknown as typeof window.OCP;
+		({ emit } = await import('@nextcloud/event-bus'))
+	})
+
+	it('is set up without a router', async () => {
+		const { useSearchStore } = await import('./search.ts')
+
+		expect(() => useSearchStore()).not.toThrow()
+	})
+
+	it('only notifies about an updated search', async () => {
+		const { useSearchStore } = await import('./search.ts')
+		const store = useSearchStore()
+
+		store.scope = 'globally'
+		store.query = 'report'
+		await nextTick()
+
+		expect(emit).toHaveBeenCalledWith('files:search:updated', { query: 'report', scope: 'globally' })
+	})
+})
diff --git a/apps/files/src/store/search.ts b/apps/files/src/store/search.ts
index 1214dfa3ee80a..32a9bcf957e27 100644
--- a/apps/files/src/store/search.ts
+++ b/apps/files/src/store/search.ts
@@ -69,7 +69,11 @@ export const useSearchStore = defineStore('search', () => {
 	function updateSearch() {
 		// emit the search event to update the filter
 		emit('files:search:updated', { query: query.value, scope: scope.value })
-		const router = window.OCP.Files.Router as RouterService
+		const router = window.OCP.Files.Router as RouterService | undefined
+		// no file list is rendered on the current page
+		if (!router) {
+			return
+		}
 
 		// if we are on the search view and the query was unset or scope was set to 'filter' we need to move back to the files view
 		if (router.params.view === VIEW_ID && (query.value === '' || scope.value === 'filter')) {
@@ -116,10 +120,10 @@ export const useSearchStore = defineStore('search', () => {
 	function initialize() {
 		subscribe('files:navigation:changed', onViewChanged)
 
-		const router = window.OCP.Files.Router as RouterService
+		const router = window.OCP.Files.Router as RouterService | undefined
 		// if we initially load the search view (e.g. hard page refresh)
 		// then we need to initialize the store from the router
-		if (router.params.view === VIEW_ID) {
+		if (router?.params.view === VIEW_ID) {
 			query.value = [router.query.query].flat()[0] ?? ''
 
 			if (query.value) {
diff --git a/apps/files/src/utils/breadcrumbs.spec.ts b/apps/files/src/utils/breadcrumbs.spec.ts
new file mode 100644
index 0000000000000..374978fc53901
--- /dev/null
+++ b/apps/files/src/utils/breadcrumbs.spec.ts
@@ -0,0 +1,32 @@
+/*!
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { describe, expect, it } from 'vitest'
+import { getBreadcrumbDirs } from './breadcrumbs.ts'
+
+describe('getBreadcrumbDirs', () => {
+	it.each([
+		['/', ['/']],
+		['/foo', ['/', '/foo']],
+		['/foo/bar/', ['/', '/foo', '/foo/bar']],
+		['/foo//bar', ['/', '/foo', '/foo/bar']],
+	])('starts at the user root for %j', (path, expected) => {
+		expect(getBreadcrumbDirs(path)).toEqual(expected)
+	})
+
+	it.each([
+		['/Team folder', ['/Team folder']],
+		['/Team folder/docs/specs', ['/Team folder', '/Team folder/docs', '/Team folder/docs/specs']],
+	])('starts at the given root for %j', (path, expected) => {
+		expect(getBreadcrumbDirs(path, '/Team folder/')).toEqual(expected)
+	})
+
+	it.each([
+		['/', ['/']],
+		['/Team folder 2/docs', ['/', '/Team folder 2', '/Team folder 2/docs']],
+	])('starts at the user root for %j outside of the given root', (path, expected) => {
+		expect(getBreadcrumbDirs(path, '/Team folder')).toEqual(expected)
+	})
+})
diff --git a/apps/files/src/utils/breadcrumbs.ts b/apps/files/src/utils/breadcrumbs.ts
new file mode 100644
index 0000000000000..c79d77b15452e
--- /dev/null
+++ b/apps/files/src/utils/breadcrumbs.ts
@@ -0,0 +1,22 @@
+/*!
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+/**
+ * Get the directories to show as breadcrumbs for a path, e.g. `['/', '/foo', '/foo/bar']`.
+ *
+ * @param path - The current directory
+ * @param root - The directory the breadcrumbs start with, if the path is within it
+ */
+export function getBreadcrumbDirs(path: string, root = '/'): string[] {
+	const normalizedRoot = root.replace(/\/+$/, '') || '/'
+	const isWithinRoot = path === normalizedRoot || path.startsWith(`${normalizedRoot}/`)
+	const start = (normalizedRoot !== '/' && isWithinRoot) ? normalizedRoot : '/'
+
+	const dirs = [start]
+	for (const segment of path.slice(start.length).split('/').filter(Boolean)) {
+		dirs.push(`${dirs.at(-1)!.replace(/\/$/, '')}/${segment}`)
+	}
+	return dirs
+}
diff --git a/apps/files/src/views/FilesList.vue b/apps/files/src/views/FilesList.vue
index c67cea3ae5138..dd95f42350fd2 100644
--- a/apps/files/src/views/FilesList.vue
+++ b/apps/files/src/views/FilesList.vue
@@ -3,7 +3,11 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<NcAppContent :pageHeading="pageHeading" data-cy-files-content>
+	<component
+		:is="embedded ? 'div' : 'NcAppContent'"
+		v-bind="embedded ? {} : { pageHeading }"
+		:class="{ 'app-content': embedded }"
+		data-cy-files-content>
 		<div class="files-list__header" :class="{ 'files-list__header--public': isPublic }">
 			<!-- Uploader -->
 			<Teleport :disabled="!isNarrow" to="body">
@@ -23,7 +27,7 @@
 			</Teleport>
 
 			<!-- Current folder breadcrumbs -->
-			<BreadCrumbs :path="directory" @reload="fetchContent" />
+			<BreadCrumbs :path="directory" :root="rootDir" @reload="fetchContent" />
 
 			<!-- Loading indicator -->
 			<NcLoadingIcon
@@ -150,7 +154,7 @@
 				</NcEmptyContent>
 			</template>
 		</FilesListVirtual>
-	</NcAppContent>
+	</component>
 </template>
 
 <script lang="ts">
@@ -233,6 +237,19 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+
+		// Skip the NcAppContent wrapper when rendered standalone via `renderFilesView()`,
+		// but keep its `app-content` class the layout and actions menus rely on.
+		embedded: {
+			type: Boolean,
+			default: false,
+		},
+
+		/** The directory to start the breadcrumbs with */
+		rootDir: {
+			type: String,
+			default: '/',
+		},
 	},
 
 	setup() {
@@ -268,12 +285,18 @@ export default defineComponent({
 		const newFileMenuActions = useNewFileMenuActions(currentFolder, dirContents)
 
 		// wait until the current folder is set up to notifiy the list is initialized
-		const stopWatching = watch(currentFolder, () => {
-			if (currentFolder.value.fileid !== undefined && currentFolder.value.fileid! > 0) {
-				nextTick(async () => emit('files:list:initialized'))
-				stopWatching()
-			}
-		}, { immediate: true })
+		const isFolderLoaded = () => currentFolder.value.fileid !== undefined && currentFolder.value.fileid! > 0
+		if (isFolderLoaded()) {
+			// e.g. the list is rendered again while the store still holds the previous folder
+			nextTick(async () => emit('files:list:initialized'))
+		} else {
+			const stopWatching = watch(currentFolder, () => {
+				if (isFolderLoaded()) {
+					nextTick(async () => emit('files:list:initialized'))
+					stopWatching()
+				}
+			})
+		}
 
 		return {
 			currentFolder,
@@ -713,6 +736,7 @@ export default defineComponent({
 	display: flex;
 	overflow: hidden;
 	flex-direction: column;
+	height: 100%;
 	max-height: 100%;
 	position: relative !important;
 }
diff --git a/apps/files/src/views/FilesNavigation.spec.ts b/apps/files/src/views/FilesNavigation.spec.ts
index 9abb8bd658a59..a0864bcf0f023 100644
--- a/apps/files/src/views/FilesNavigation.spec.ts
+++ b/apps/files/src/views/FilesNavigation.spec.ts
@@ -11,7 +11,7 @@ import { createTestingPinia } from '@pinia/testing'
 import { cleanup, fireEvent, getAllByRole, render } from '@testing-library/vue'
 import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest'
 import NavigationView from './FilesNavigation.vue'
-import { router } from '../router/router.ts'
+import { getFilesAppRouter } from '../router/router.ts'
 import RouterService from '../services/RouterService.ts'
 import { useViewConfigStore } from '../store/viewConfig.ts'
 
@@ -21,6 +21,7 @@ beforeAll(async () => {
 	await fireEvent.resize(window)
 })
 
+const router = getFilesAppRouter()
 const navigation = getNavigation()
 beforeEach(() => {
 	const views = [...navigation.views]
diff --git a/apps/files/tests/Controller/ViewControllerTest.php b/apps/files/tests/Controller/ViewControllerTest.php
index 1738cfa847c1e..b3ebb38513678 100644
--- a/apps/files/tests/Controller/ViewControllerTest.php
+++ b/apps/files/tests/Controller/ViewControllerTest.php
@@ -9,26 +9,20 @@
 
 namespace OCA\Files\Tests\Controller;
 
-use OC\Files\FilenameValidator;
 use OC\Route\Router;
 use OC\URLGenerator;
 use OCA\Files\Controller\ViewController;
-use OCA\Files\Service\UserConfig;
-use OCA\Files\Service\ViewConfig;
 use OCP\App\IAppManager;
 use OCP\AppFramework\Http\ContentSecurityPolicy;
 use OCP\AppFramework\Http\RedirectResponse;
 use OCP\AppFramework\Http\TemplateResponse;
-use OCP\AppFramework\Services\IAppConfig;
 use OCP\AppFramework\Services\IInitialState;
-use OCP\Authentication\TwoFactorAuth\IRegistry;
 use OCP\Diagnostics\IEventLogger;
 use OCP\EventDispatcher\IEventDispatcher;
 use OCP\Files\File;
 use OCP\Files\Folder;
 use OCP\Files\IRootFolder;
 use OCP\Files\IUserFolder;
-use OCP\Files\Template\ITemplateManager;
 use OCP\ICacheFactory;
 use OCP\IConfig;
 use OCP\IL10N;
@@ -51,7 +45,6 @@
 class ViewControllerTest extends TestCase {
 	private ContainerInterface&MockObject $container;
 	private IAppManager&MockObject $appManager;
-	private IAppConfig&MockObject $appConfig;
 	private ICacheFactory&MockObject $cacheFactory;
 	private IConfig&MockObject $config;
 	private IEventDispatcher $eventDispatcher;
@@ -60,33 +53,24 @@ class ViewControllerTest extends TestCase {
 	private IL10N&MockObject $l10n;
 	private IRequest&MockObject $request;
 	private IRootFolder&MockObject $rootFolder;
-	private ITemplateManager&MockObject $templateManager;
 	private IURLGenerator $urlGenerator;
 	private IUser&MockObject $user;
 	private IUserSession&MockObject $userSession;
 	private LoggerInterface&MockObject $logger;
-	private UserConfig&MockObject $userConfig;
-	private ViewConfig&MockObject $viewConfig;
 	private Router $router;
-	private IRegistry&MockObject $twoFactorRegistry;
 
 	private ViewController&MockObject $viewController;
 
 	protected function setUp(): void {
 		parent::setUp();
 		$this->appManager = $this->createMock(IAppManager::class);
-		$this->appConfig = $this->createMock(IAppConfig::class);
 		$this->config = $this->createMock(IConfig::class);
 		$this->eventDispatcher = $this->createMock(IEventDispatcher::class);
 		$this->initialState = $this->createMock(IInitialState::class);
 		$this->l10n = $this->createMock(IL10N::class);
 		$this->request = $this->createMock(IRequest::class);
 		$this->rootFolder = $this->createMock(IRootFolder::class);
-		$this->templateManager = $this->createMock(ITemplateManager::class);
-		$this->userConfig = $this->createMock(UserConfig::class);
 		$this->userSession = $this->createMock(IUserSession::class);
-		$this->viewConfig = $this->createMock(ViewConfig::class);
-		$this->twoFactorRegistry = $this->createMock(IRegistry::class);
 
 		$this->user = $this->getMockBuilder(IUser::class)->getMock();
 		$this->user->expects($this->any())
@@ -133,25 +117,17 @@ protected function setUp(): void {
 			$this->router
 		);
 
-		$filenameValidator = $this->createMock(FilenameValidator::class);
 		$this->viewController = $this->getMockBuilder(ViewController::class)
 			->setConstructorArgs([
 				'files',
 				$this->request,
 				$this->urlGenerator,
 				$this->l10n,
-				$this->config,
 				$this->eventDispatcher,
 				$this->userSession,
 				$this->appManager,
 				$this->rootFolder,
 				$this->initialState,
-				$this->templateManager,
-				$this->userConfig,
-				$this->viewConfig,
-				$filenameValidator,
-				$this->twoFactorRegistry,
-				$this->appConfig,
 			])
 			->onlyMethods([
 				'getStorageInfo',
@@ -300,28 +276,4 @@ public function testShowFileRouteWithTrashedFile(): void {
 		$expected = new RedirectResponse('/index.php/apps/files/trashbin/123?dir=/test.d1462861890/sub');
 		$this->assertEquals($expected, $this->viewController->index('', '', '123'));
 	}
-
-	public function testTwoFactorAuthEnabled(): void {
-		$this->twoFactorRegistry->method('getProviderStates')
-			->willReturn([
-				'totp' => true,
-				'backup_codes' => true,
-			]);
-
-		$initialStates = [];
-		$this->initialState->expects(self::atLeast(13))
-			->method('provideInitialState')
-			->willReturnCallback(function ($key, $data) use (&$initialStates): void {
-				$initialStates[$key] = $data;
-			});
-
-		$this->config
-			->method('getUserValue')
-			->willReturnMap([
-				[$this->user->getUID(), 'files', 'files_sorting_configs', '{}', '{}'],
-			]);
-
-		$this->viewController->index('', '', null);
-		$this->assertTrue($initialStates['isTwoFactorEnabled'] ?? false);
-	}
 }
diff --git a/apps/files/tests/Listener/LoadFilesAppListenerTest.php b/apps/files/tests/Listener/LoadFilesAppListenerTest.php
new file mode 100644
index 0000000000000..e9296b8921014
--- /dev/null
+++ b/apps/files/tests/Listener/LoadFilesAppListenerTest.php
@@ -0,0 +1,103 @@
+<?php
+
+declare(strict_types=1);
+
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+namespace OCA\Files\Tests\Listener;
+
+use OC\Files\FilenameValidator;
+use OCA\Files\Event\LoadFilesApp;
+use OCA\Files\Listener\LoadFilesAppListener;
+use OCA\Files\Service\UserConfig;
+use OCA\Files\Service\ViewConfig;
+use OCP\AppFramework\Services\IAppConfig;
+use OCP\AppFramework\Services\IInitialState;
+use OCP\Authentication\TwoFactorAuth\IRegistry;
+use OCP\Config\IUserConfig;
+use OCP\EventDispatcher\Event;
+use OCP\EventDispatcher\IEventDispatcher;
+use OCP\Files\Template\ITemplateManager;
+use OCP\IUser;
+use OCP\IUserSession;
+use PHPUnit\Framework\MockObject\MockObject;
+use Test\TestCase;
+
+class LoadFilesAppListenerTest extends TestCase {
+	private IEventDispatcher&MockObject $eventDispatcher;
+	private IInitialState&MockObject $initialState;
+	private IUserConfig&MockObject $config;
+	private IUserSession&MockObject $userSession;
+	private UserConfig&MockObject $userConfig;
+	private ViewConfig&MockObject $viewConfig;
+	private FilenameValidator&MockObject $filenameValidator;
+	private IRegistry&MockObject $twoFactorRegistry;
+	private IAppConfig&MockObject $appConfig;
+	private ITemplateManager&MockObject $templateManager;
+	private IUser&MockObject $user;
+
+	private LoadFilesAppListener $listener;
+
+	#[\Override]
+	protected function setUp(): void {
+		parent::setUp();
+
+		$this->eventDispatcher = $this->createMock(IEventDispatcher::class);
+		$this->initialState = $this->createMock(IInitialState::class);
+		$this->config = $this->createMock(IUserConfig::class);
+		$this->userSession = $this->createMock(IUserSession::class);
+		$this->userConfig = $this->createMock(UserConfig::class);
+		$this->viewConfig = $this->createMock(ViewConfig::class);
+		$this->filenameValidator = $this->createMock(FilenameValidator::class);
+		$this->twoFactorRegistry = $this->createMock(IRegistry::class);
+		$this->appConfig = $this->createMock(IAppConfig::class);
+		$this->templateManager = $this->createMock(ITemplateManager::class);
+
+		$this->user = $this->createMock(IUser::class);
+		$this->user->method('getUID')->willReturn('testuser1');
+		$this->userSession->method('getUser')->willReturn($this->user);
+
+		$this->config->method('getValueString')->willReturn('{}');
+
+		$this->listener = new LoadFilesAppListener(
+			$this->eventDispatcher,
+			$this->initialState,
+			$this->config,
+			$this->userSession,
+			$this->userConfig,
+			$this->viewConfig,
+			$this->filenameValidator,
+			$this->twoFactorRegistry,
+			$this->appConfig,
+			$this->templateManager,
+		);
+	}
+
+	public function testIgnoresOtherEvents(): void {
+		$this->initialState->expects(self::never())->method('provideInitialState');
+		$this->listener->handle($this->createMock(Event::class));
+	}
+
+	public function testProvidesInitialStateAndDispatchesLoadEvents(): void {
+		$this->twoFactorRegistry->method('getProviderStates')
+			->willReturn([
+				'totp' => true,
+				'backup_codes' => true,
+			]);
+
+		$initialStates = [];
+		$this->initialState->expects(self::atLeastOnce())
+			->method('provideInitialState')
+			->willReturnCallback(function ($key, $data) use (&$initialStates): void {
+				$initialStates[$key] = $data;
+			});
+
+		$this->listener->handle(new LoadFilesApp());
+
+		$this->assertTrue($initialStates['isTwoFactorEnabled'] ?? false);
+		$this->assertTrue($initialStates['templates_enabled'] ?? false);
+	}
+}
diff --git a/window.d.ts b/window.d.ts
index 53653f58ecfc1..04d1bd9bcdb4f 100644
--- a/window.d.ts
+++ b/window.d.ts
@@ -4,6 +4,7 @@
  */
 
 import type Tab from './apps/files/src/models/Tab.js'
+import type { RenderedFilesView, RenderFilesViewOptions } from './apps/files/src/services/renderFilesView.ts'
 import type RouterService from './apps/files/src/services/RouterService.ts'
 import type Settings from './apps/files/src/services/Settings.js'
 import type Sidebar from './apps/files/src/services/Sidebar.js'
@@ -38,6 +39,7 @@ declare global {
 		OCP: {
 			Files: {
 				Router: RouterService
+				renderFilesApp: (el: HTMLElement, viewId: string, options?: RenderFilesViewOptions) => RenderedFilesView
 			}
 		} & Nextcloud.v29.OCP