diff --git a/cypress/component/menuItems.cy.js b/cypress/component/menuItems.cy.js
index dce785d631..e3ded0926d 100644
--- a/cypress/component/menuItems.cy.js
+++ b/cypress/component/menuItems.cy.js
@@ -11,6 +11,8 @@ import {
 	isFixedItem,
 	isValidMenuLink,
 	menuItemErrors,
+	menuItemRoute,
+	menuTree,
 	moveItem,
 	newDashboardItem,
 	outdentItem,
@@ -172,4 +174,26 @@ describe('menu items', () => {
 		// without an id, only the fixed dashboard item is valid
 		expect(menuItemErrors({ ...page, targetId: null }).target).to.equal(true)
 	})
+
+	it('routes a page, view or table entry inside the app and leaves a link outside it', () => {
+		expect(menuItemRoute({ targetType: 'page', targetId: 12, technicalName: 'dashboard' }, 7)).to.equal('/application/7/menu/dashboard')
+		expect(menuItemRoute({ targetType: 'view', technicalName: 'home' }, 7)).to.equal('/application/7/menu/home')
+		expect(menuItemRoute({ targetType: 'table', technicalName: 'cases' }, 7)).to.equal('/application/7/menu/cases')
+		expect(menuItemRoute({ targetType: 'url', technicalName: 'docs' }, 7)).to.equal(null)
+	})
+
+	it('builds the stored menu into a tree in menu order', () => {
+		const stored = [
+			{ id: 3, order: 30, parentId: null, label: 'Docs' },
+			{ id: 2, order: 20, parentId: 1, label: 'Open cases' },
+			{ id: 1, order: 10, parentId: null, label: 'Cases' },
+		]
+
+		const tree = menuTree(stored)
+
+		expect(tree.map(branch => branch.item.label)).to.deep.equal(['Cases', 'Docs'])
+		expect(tree[0].children.map(child => child.label)).to.deep.equal(['Open cases'])
+		expect(tree[1].children).to.deep.equal([])
+		expect(menuTree(undefined)).to.deep.equal([])
+	})
 })
diff --git a/playwright/e2e/application.spec.ts b/playwright/e2e/application.spec.ts
new file mode 100644
index 0000000000..cb2f97634d
--- /dev/null
+++ b/playwright/e2e/application.spec.ts
@@ -0,0 +1,125 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { APIRequestContext } from '@playwright/test'
+import { test, expect } from '../support/fixtures'
+import { ocsRequest, type TestUser } from '../support/api'
+
+test.use({ viewport: { width: 1600, height: 1000 } })
+
+const API = '/ocs/v2.php/apps/tables/api/2'
+
+/**
+ * Creates an application with a table on its start page, a grid page with a header, and a menu
+ * that opens the start page, the grid page, the table and an external link, through the API.
+ *
+ * @param request the request context of the test user
+ * @param user the test user
+ * @param name name of the application
+ */
+async function createApplicationWithMenu(request: APIRequestContext, user: TestUser, name: string) {
+	const tableResponse = await ocsRequest(request, user, { method: 'POST', url: '/index.php/apps/tables/api/1/tables', data: { title: name + ' cases' } })
+	const tableId = (await tableResponse.json()).id
+	const contextResponse = await ocsRequest(request, user, {
+		method: 'POST',
+		url: `${API}/contexts?format=json`,
+		data: { name, iconName: 'star', nodes: [{ id: tableId, type: 0, permissions: 1 }] },
+	})
+	const context = (await contextResponse.json()).ocs.data
+	// A new application's dashboard item opens its start page
+	const startPageId = context.menuItems.find((item: { technicalName: string }) => item.technicalName === 'dashboard').targetId
+	const pageResponse = await ocsRequest(request, user, { method: 'POST', url: `${API}/contexts/${context.id}/pages?format=json`, data: { title: 'Front page' } })
+	const frontPageId = (await pageResponse.json()).ocs.data.id
+	await ocsRequest(request, user, {
+		method: 'PUT',
+		url: `${API}/contexts/${context.id}/pages/${frontPageId}/widgets?format=json`,
+		data: { widgets: [{ type: 'header', configuration: {}, content: { title: 'Welcome on the front page' }, gridX: 0, gridY: 0, gridWidth: 12, gridHeight: 2 }] },
+	})
+	await ocsRequest(request, user, {
+		method: 'PUT',
+		url: `${API}/contexts/${context.id}?format=json`,
+		data: {
+			menuItems: [
+				{ label: 'Dashboard', targetType: 'page', targetId: startPageId, technicalName: 'dashboard' },
+				{ label: 'Front page', targetType: 'page', targetId: frontPageId },
+				{ label: 'Cases', targetType: 'table', targetId: tableId },
+				{ label: 'Handbook', targetType: 'url', url: 'https://docs.nextcloud.com' },
+			],
+		},
+	})
+	return { contextId: context.id, frontPageId, tableTitle: name + ' cases' }
+}
+
+test.describe('Applications', () => {
+	test('An application opened on its own shows its menu and opens what each item points at', async ({ userPage: { page, user } }) => {
+		const { contextId, tableTitle } = await createApplicationWithMenu(page.request, user, 'standalone application')
+
+		await page.goto(`/index.php/apps/tables/app/${contextId}`)
+
+		await expect(page.locator('[data-cy="application-nav-header"]')).toContainText('standalone application')
+		const items = page.locator('[data-cy="application-nav-item"]')
+		await expect(items).toHaveCount(4)
+		// The first menu item is the dashboard: the start page with the application's table
+		await expect(page).toHaveURL(/\/menu\/dashboard$/)
+		await expect(page.locator('h1', { hasText: tableTitle })).toBeVisible({ timeout: 30000 })
+		await expect(page.locator('[data-cy="navigationCreateTableIcon"]')).toHaveCount(0)
+		await expect(page.locator('[data-cy="application-nav-overview"]')).toHaveCount(0)
+		// Nothing focused the content area before the person touched the page, so no focus ring is drawn around it
+		expect(await page.evaluate(() => document.activeElement?.id ?? '')).not.toBe('app-content-vue')
+
+		await items.filter({ hasText: 'Front page' }).getByRole('link').click()
+		await expect(page).toHaveURL(/\/menu\/front_page$/)
+		await expect(page.getByText('Welcome on the front page')).toBeVisible()
+
+		await items.filter({ hasText: 'Cases' }).getByRole('link').click()
+		await expect(page).toHaveURL(/\/menu\/cases$/)
+		await expect(page.locator('h1', { hasText: tableTitle })).toBeVisible()
+
+		await expect(items.filter({ hasText: 'Handbook' }).getByRole('link')).toHaveAttribute('href', 'https://docs.nextcloud.com')
+	})
+
+	test('Inside Tables a menu item opens below a breadcrumb back to the application', async ({ userPage: { page, user } }) => {
+		const { contextId } = await createApplicationWithMenu(page.request, user, 'breadcrumb application')
+
+		await page.goto(`/index.php/apps/tables/#/application/${contextId}/menu/front_page`)
+
+		const breadcrumb = page.locator('[data-cy="context-breadcrumb"]')
+		await expect(breadcrumb).toContainText('breadcrumb application')
+		await expect(breadcrumb).toContainText('Front page')
+		await expect(page.getByText('Welcome on the front page')).toBeVisible()
+		await expect(page.locator('[data-cy="context-open-application"]')).toHaveAttribute('href', new RegExp(`/apps/tables/app/${contextId}$`))
+
+		await page.locator('[data-cy="context-menu-overview"]').click()
+		await expect(page).toHaveURL(new RegExp(`/application/${contextId}$`))
+		await expect(page.locator('[data-cy="contextPageLink"]', { hasText: 'Front page' })).toBeVisible()
+	})
+
+	test('A menu item whose page is gone shows as broken', async ({ userPage: { page, user } }) => {
+		const { contextId, frontPageId } = await createApplicationWithMenu(page.request, user, 'broken item application')
+		await ocsRequest(page.request, user, { method: 'DELETE', url: `${API}/contexts/${contextId}/pages/${frontPageId}?format=json` })
+
+		await page.goto(`/index.php/apps/tables/app/${contextId}`)
+		await expect(page).toHaveURL(/\/menu\/dashboard$/)
+		await page.locator('[data-cy="application-nav-item"]').filter({ hasText: 'Front page' }).getByRole('link').click()
+
+		await expect(page.locator('[data-cy="context-menu-target-missing"]')).toBeVisible()
+		await expect(page.locator('[data-cy="application-nav-item"]').filter({ hasText: 'Front page' }).locator('.alert-circle-outline-icon')).toHaveCount(1)
+	})
+
+	test('An application whose menu has no dashboard item keeps its start page in the navigation', async ({ userPage: { page, user } }) => {
+		const { contextId, tableTitle } = await createApplicationWithMenu(page.request, user, 'no dashboard application')
+		await ocsRequest(page.request, user, {
+			method: 'PUT',
+			url: `${API}/contexts/${contextId}?format=json`,
+			data: { menuItems: [{ label: 'Handbook', targetType: 'url', url: 'https://docs.nextcloud.com' }] },
+		})
+
+		await page.goto(`/index.php/apps/tables/app/${contextId}`)
+
+		const startPage = page.locator('[data-cy="application-nav-overview"]')
+		await expect(startPage).toContainText('Dashboard')
+		await expect(page.locator('h1', { hasText: tableTitle })).toBeVisible({ timeout: 30000 })
+	})
+})
diff --git a/src/App.vue b/src/App.vue
index d294ae6c2c..39c01dd331 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,7 +4,8 @@
 -->
 <template>
 	<NcContent app-name="tables">
-		<Navigation v-if="!isPublicShare" />
+		<ApplicationNavigation v-if="!isPublicShare && isStandaloneApplication" />
+		<Navigation v-else-if="!isPublicShare" />
 		<NcAppContent>
 			<div v-if="isLoadingSomething" class="icon-loading" />
 
@@ -18,6 +19,7 @@
 <script>
 import { NcContent, NcAppContent } from '@nextcloud/vue'
 import Navigation from './modules/navigation/sections/Navigation.vue'
+import ApplicationNavigation from './modules/navigation/sections/ApplicationNavigation.vue'
 import PublicTableView from './pages/PublicTableView.vue'
 import { mapState, mapActions } from 'pinia'
 import Sidebar from './modules/sidebar/sections/Sidebar.vue'
@@ -26,6 +28,10 @@ import { loadState } from '@nextcloud/initial-state'
 import { useTablesStore } from './store/store.js'
 import { generateUrl } from '@nextcloud/router'
 
+// A page that focuses its content before the person has touched it shows the browser's focus
+// ring around the whole content area. Focus moves only after a first pointer or keyboard event.
+const FIRST_INTERACTION_EVENTS = ['pointerdown', 'keydown']
+
 export default {
 	name: 'App',
 	components: {
@@ -34,6 +40,7 @@ export default {
 		NcContent,
 		NcAppContent,
 		Navigation,
+		ApplicationNavigation,
 	},
 	props: {
 		tableId: {
@@ -46,6 +53,8 @@ export default {
 			loading: false,
 			defaultPageTitle: false,
 			shareToken: loadState('tables', 'shareToken', false),
+			standaloneContextId: loadState('tables', 'contextId', null),
+			userHasInteracted: false,
 		}
 	},
 	computed: {
@@ -53,6 +62,9 @@ export default {
 		isPublicShare() {
 			return !!this.shareToken
 		},
+		isStandaloneApplication() {
+			return this.standaloneContextId !== null
+		},
 	},
 	watch: {
 		'$route'(to) {
@@ -60,6 +72,9 @@ export default {
 		},
 	},
 	async created() {
+		for (const type of FIRST_INTERACTION_EVENTS) {
+			document.addEventListener(type, this.onFirstInteraction, { capture: true })
+		}
 		const store = useTablesStore()
 		if (!this.isPublicShare) {
 			await Promise.all([
@@ -73,27 +88,40 @@ export default {
 			store.setLoading({ key: 'viewsShared', value: false })
 			store.setLoading({ key: 'contexts', value: false })
 		}
-		this.routing(this.$route)
+		this.routing(this.$route, true)
 	},
 	mounted() {
 		this.$nextTick(() => this.observeAppContent())
 	},
+	beforeUnmount() {
+		this.removeFirstInteractionListeners()
+	},
 	methods: {
+		onFirstInteraction() {
+			this.userHasInteracted = true
+			this.removeFirstInteractionListeners()
+		},
+		removeFirstInteractionListeners() {
+			for (const type of FIRST_INTERACTION_EVENTS) {
+				document.removeEventListener(type, this.onFirstInteraction, { capture: true })
+			}
+		},
 		...mapActions(useTablesStore, ['loadTablesFromBE', 'getAllContexts', 'loadViewsSharedWithMeFromBE', 'loadTemplatesFromBE', 'setActiveRowId', 'setActiveTableId', 'setActiveViewId', 'setActiveContextId']),
-		routing(currentRoute) {
+		/**
+		 * @param {object} currentRoute the route to apply
+		 * @param {boolean} initial true for the first route on page load. Routes that follow without the
+		 *   user having touched the page (the redirects of the standalone shell) do not take focus either:
+		 *   a programmatic focus before any interaction draws the focus ring around the content area
+		 */
+		routing(currentRoute, initial = false) {
 			const url = generateUrl('/apps/tables/')
 
-			try {
-				if (loadState('tables', 'contextId', undefined)) {
-					// prepare route, when Context is opened from navigation bar
-					const contextId = loadState('tables', 'contextId', undefined)
-					const originalUrl = window.location.href
-					this.$router.replace('/application/' + contextId).catch(() => { })
-					// reverts turning /apps/tables/app/28 into /apps/tables/app/28#/application/28
-					history.replaceState({}, undefined, originalUrl)
-				}
-			} catch (e) {
-				// contextId is not always set, it is fine.
+			// An application opened on its own starts at its root; later route changes inside it must stay
+			if (this.standaloneContextId !== null && currentRoute.path === '/') {
+				const originalUrl = window.location.href
+				this.$router.replace('/application/' + this.standaloneContextId).catch(() => { })
+				// Reverts turning /apps/tables/app/28 into /apps/tables/app/28#/application/28
+				history.replaceState({}, undefined, originalUrl)
 			}
 
 			if (currentRoute.name === 'tableRow' || currentRoute.name === 'viewRow') {
@@ -133,13 +161,15 @@ export default {
 				}
 
 				// move the focus away from nav bar (import for app-internal switch)
-				const appContent = document.getElementById('app-content-vue')
-				const oldTabIndex = appContent.tabIndex
-				if (oldTabIndex === -1) {
-					appContent.tabIndex = 0
+				if (!initial && this.userHasInteracted) {
+					const appContent = document.getElementById('app-content-vue')
+					const oldTabIndex = appContent.tabIndex
+					if (oldTabIndex === -1) {
+						appContent.tabIndex = 0
+					}
+					appContent.focus()
+					appContent.tabIndex = oldTabIndex
 				}
-				appContent.focus()
-				appContent.tabIndex = oldTabIndex
 			}
 		},
 		switchActiveMenuEntry(targetElement) {
diff --git a/src/modules/navigation/sections/ApplicationNavigation.vue b/src/modules/navigation/sections/ApplicationNavigation.vue
new file mode 100644
index 0000000000..bc4aa53841
--- /dev/null
+++ b/src/modules/navigation/sections/ApplicationNavigation.vue
@@ -0,0 +1,158 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<NcAppNavigation :aria-label="context ? context.name : t('tables', 'Application')">
+		<template #list>
+			<NcLoadingIcon v-if="!context" :size="32" />
+			<template v-else>
+				<div class="application-navigation__header" data-cy="application-nav-header">
+					<ApplicationIcon :icon-name="context.iconName" :size="32" />
+					<div class="application-navigation__title">
+						<strong>{{ context.name }}</strong>
+						<span v-if="context.description" class="application-navigation__description">{{ context.description }}</span>
+					</div>
+				</div>
+				<NcAppNavigationItem v-for="branch in menuTree"
+					:key="branch.item.id"
+					:name="branch.item.label"
+					:to="branch.item.targetType === 'url' ? undefined : menuItemRoute(branch.item, context.id)"
+					:href="branch.item.targetType === 'url' ? branch.item.url : undefined"
+					:class="{ active: isActive(branch.item) }"
+					:allow-collapse="branch.children.length > 0"
+					:open="branch.children.some(child => isActive(child))"
+					data-cy="application-nav-item">
+					<template #icon>
+						<MenuItemIcon :item="branch.item" />
+					</template>
+					<template v-if="branch.children.length > 0">
+						<NcAppNavigationItem v-for="child in branch.children"
+							:key="child.id"
+							:name="child.label"
+							:to="child.targetType === 'url' ? undefined : menuItemRoute(child, context.id)"
+							:href="child.targetType === 'url' ? child.url : undefined"
+							:class="{ active: isActive(child) }"
+							data-cy="application-nav-item">
+							<template #icon>
+								<MenuItemIcon :item="child" />
+							</template>
+						</NcAppNavigationItem>
+					</template>
+				</NcAppNavigationItem>
+				<NcAppNavigationItem v-if="startPage && !startPageInMenu"
+					:name="startPage.title || t('tables', 'Dashboard')"
+					:to="'/application/' + context.id"
+					:class="{ active: !$route.params.itemName && !$route.params.pageId }"
+					data-cy="application-nav-overview">
+					<template #icon>
+						<ViewGridOutline :size="20" />
+					</template>
+				</NcAppNavigationItem>
+			</template>
+		</template>
+		<template #footer>
+			<div v-if="context && ownsContext(context)" class="application-navigation__footer">
+				<NcButton variant="tertiary" :href="configurationUrl" data-cy="application-nav-configure">
+					<template #icon>
+						<CogOutline :size="20" />
+					</template>
+					{{ t('tables', 'Configure in Tables') }}
+				</NcButton>
+			</div>
+		</template>
+	</NcAppNavigation>
+</template>
+
+<script>
+import { NcAppNavigation, NcAppNavigationItem, NcButton, NcLoadingIcon } from '@nextcloud/vue'
+import CogOutline from 'vue-material-design-icons/CogOutline.vue'
+import ViewGridOutline from 'vue-material-design-icons/ViewGridOutline.vue'
+import { generateUrl } from '@nextcloud/router'
+import { mapState } from 'pinia'
+import ApplicationIcon from '../../../shared/components/ApplicationIcon.vue'
+import MenuItemIcon from '../../../shared/components/MenuItemIcon.vue'
+import permissionsMixin from '../../../shared/components/ncTable/mixins/permissionsMixin.js'
+import { menuItemRoute, menuTree } from '../../../shared/utils/menuItems.js'
+import { useTablesStore } from '../../../store/store.js'
+
+/**
+ * The navigation of an application opened on its own: its menu items are the entries.
+ */
+export default {
+	name: 'ApplicationNavigation',
+	components: {
+		NcAppNavigation,
+		NcAppNavigationItem,
+		NcButton,
+		NcLoadingIcon,
+		CogOutline,
+		ViewGridOutline,
+		ApplicationIcon,
+		MenuItemIcon,
+	},
+	mixins: [permissionsMixin],
+	computed: {
+		...mapState(useTablesStore, ['activeContext']),
+		context() {
+			return this.activeContext
+		},
+		menuItems() {
+			return [...(this.context?.menuItems ?? [])].sort((a, b) => a.order - b.order)
+		},
+		menuTree() {
+			return menuTree(this.menuItems)
+		},
+		startPage() {
+			return Object.values(this.context?.pages ?? {}).find(page => page.page_type === 'startpage') ?? null
+		},
+		/**
+		 * Whether a menu item opens the start page. When none does, the start page gets an entry of
+		 * its own, so it stays reachable.
+		 *
+		 * @return {boolean}
+		 */
+		startPageInMenu() {
+			return this.menuItems.some(item => item.targetType === 'page' && item.targetId === this.startPage?.id)
+		},
+		configurationUrl() {
+			return generateUrl('/apps/tables/') + '#/application/' + this.context.id
+		},
+	},
+	methods: {
+		menuItemRoute,
+		isActive(item) {
+			return item.targetType !== 'url' && this.$route.params.itemName === item.technicalName
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.application-navigation {
+	&__header {
+		display: flex;
+		align-items: center;
+		gap: calc(3 * var(--default-grid-baseline));
+		padding: calc(3 * var(--default-grid-baseline)) calc(4 * var(--default-grid-baseline));
+	}
+
+	&__title {
+		display: flex;
+		flex-direction: column;
+		min-width: 0;
+	}
+
+	&__description {
+		color: var(--color-text-maxcontrast);
+		font-size: 0.9em;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	&__footer {
+		padding: calc(2 * var(--default-grid-baseline));
+	}
+}
+</style>
diff --git a/src/pages/Context.vue b/src/pages/Context.vue
index aa66c98405..2475e7c9dd 100644
--- a/src/pages/Context.vue
+++ b/src/pages/Context.vue
@@ -6,8 +6,30 @@
 	<div class="row main-context-view">
 		<div v-if="loading" class="icon-loading" />
 
-		<div v-else-if="activeContext && context">
-			<div class="content context">
+		<div v-else-if="activeContext && context" :class="{ 'context--standalone': isStandalone }">
+			<div v-if="isMenuRoute && !isStandalone" class="context__breadcrumb" data-cy="context-breadcrumb">
+				<NcButton variant="tertiary" data-cy="context-menu-overview" @click="openRoute('/application/' + context.id)">
+					<template #icon>
+						<ChevronLeft :size="20" />
+					</template>
+					{{ activeContext.name }}
+				</NcButton>
+				<span class="context__breadcrumb-separator" aria-hidden="true">/</span>
+				<span class="context__breadcrumb-current">{{ selectedMenuItem ? selectedMenuItem.label : $route.params.itemName }}</span>
+				<NcButton variant="secondary"
+					:href="applicationUrl"
+					target="_blank"
+					rel="noopener"
+					class="context__breadcrumb-open"
+					data-cy="context-open-application">
+					<template #icon>
+						<OpenInNew :size="20" />
+					</template>
+					{{ t('tables', 'Open application') }}
+				</NcButton>
+			</div>
+
+			<div v-if="!isMenuRoute && !isStandalone" class="content context">
 				<div class="row first-row">
 					<h1 class="context__title" data-cy="context-title">
 						<NcIconSvgWrapper :svg="icon" :size="32" style="display: inline-block;" />&nbsp; {{
@@ -51,14 +73,29 @@
 				</nav>
 			</div>
 
-			<GridPage v-if="activePage"
-				:key="activePage.id"
-				:context="context"
-				:page="activePage"
-				:can-edit="canManage"
-				:start-in-edit-mode="$route.query.edit === '1'"
-				@saved="onPageSaved" />
-			<ErrorMessage v-else :message="t('tables', 'This page could not be found')" />
+			<div v-if="isMenuRoute" class="context__menu-target" data-cy="context-menu-target">
+				<NcEmptyContent v-if="!menuTarget"
+					:name="t('tables', 'This menu item points at nothing')"
+					:description="t('tables', 'The page, view or table it opened no longer exists, or you have no access to it.')"
+					data-cy="context-menu-target-missing" />
+				<GridPage v-else-if="menuTarget.page"
+					:key="'page-' + menuTarget.page.id"
+					:context="context"
+					:page="menuTarget.page"
+					:can-edit="canManage"
+					@saved="onPageSaved" />
+				<DataWidget v-else :key="menuTarget.data.type + '-' + menuTarget.data.id" :target="menuTarget.data" />
+			</div>
+			<template v-else>
+				<GridPage v-if="activePage"
+					:key="activePage.id"
+					:context="context"
+					:page="activePage"
+					:can-edit="canManage"
+					:start-in-edit-mode="$route.query.edit === '1'"
+					@saved="onPageSaved" />
+				<ErrorMessage v-else :message="t('tables', 'This page could not be found')" />
+			</template>
 
 			<ContextPageForm :show-modal="pageFormOpen"
 				:page="pageBeingRenamed"
@@ -75,8 +112,12 @@
 <script>
 import MainModals from '../modules/modals/Modals.vue'
 import { mapState, mapActions } from 'pinia'
-import { NcActionButton, NcActions, NcButton, NcIconSvgWrapper } from '@nextcloud/vue'
+import { NcActionButton, NcActions, NcButton, NcEmptyContent, NcIconSvgWrapper } from '@nextcloud/vue'
 import { showConfirmation } from '@nextcloud/dialogs'
+import { loadState } from '@nextcloud/initial-state'
+import { generateUrl } from '@nextcloud/router'
+import ChevronLeft from 'vue-material-design-icons/ChevronLeft.vue'
+import OpenInNew from 'vue-material-design-icons/OpenInNew.vue'
 import PencilOutline from 'vue-material-design-icons/PencilOutline.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
 import TrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
@@ -86,12 +127,16 @@ import permissionsMixin from '../shared/components/ncTable/mixins/permissionsMix
 import { useTablesStore } from '../store/store.js'
 import ErrorMessage from '../modules/main/partials/ErrorMessage.vue'
 import GridPage from '../modules/grid/GridPage.vue'
+import DataWidget from '../modules/grid/widgets/DataWidget.vue'
 import ContextPageForm from '../modules/modals/ContextPageForm.vue'
 import displayError, { getNotFoundError, getGenericLoadError } from '../shared/utils/displayError.js'
+import { menuItemRoute } from '../shared/utils/menuItems.js'
 
 /**
  * An application: its title and description, and its pages. The start page is the
- * dashboard; every page shows its widgets on a grid.
+ * dashboard; every page shows its widgets on a grid. A menu item route opens what the
+ * item points at. Opened on its own, at /apps/tables/app/{id}, the application's menu
+ * is the navigation and it starts on its first menu item.
  */
 export default {
 	components: {
@@ -99,12 +144,16 @@ export default {
 		NcActionButton,
 		NcActions,
 		NcButton,
+		NcEmptyContent,
 		NcIconSvgWrapper,
+		ChevronLeft,
+		OpenInNew,
 		PencilOutline,
 		Plus,
 		TrashCanOutline,
 		ErrorMessage,
 		GridPage,
+		DataWidget,
 		ContextPageForm,
 	},
 
@@ -121,6 +170,8 @@ export default {
 			isReloading: false,
 			pageFormOpen: false,
 			pageBeingRenamed: null,
+			standaloneContextId: loadState('tables', 'contextId', null),
+			openedFirstPage: false,
 		}
 	},
 
@@ -129,6 +180,58 @@ export default {
 		canManage() {
 			return this.ownsContext(this.context)
 		},
+		menuItems() {
+			return [...(this.activeContext?.menuItems ?? [])].sort((a, b) => a.order - b.order)
+		},
+		/**
+		 * Whether the application was opened on its own, at /apps/tables/app/{id}, with its own menu.
+		 *
+		 * @return {boolean}
+		 */
+		isStandalone() {
+			return this.standaloneContextId !== null
+		},
+		applicationUrl() {
+			return window.location.origin + generateUrl('/apps/tables/app/' + this.activeContext?.id)
+		},
+		isMenuRoute() {
+			return !!this.$route.params.itemName
+		},
+		selectedMenuItem() {
+			const technicalName = this.$route.params.itemName
+			if (!technicalName) {
+				return null
+			}
+			return this.menuItems.find(item => item.technicalName === technicalName) ?? null
+		},
+		/**
+		 * What the selected menu item opens: a page of the application, or a table or view.
+		 * Null when the item is unknown, broken or a link.
+		 *
+		 * @return {{page: object}|{data: {type: string, id: number}}|null}
+		 */
+		menuTarget() {
+			const item = this.selectedMenuItem
+			if (!item || item.broken || item.targetType === 'url') {
+				return null
+			}
+			if (item.targetType === 'page') {
+				const page = this.pages.find(page => page.id === item.targetId)
+				return page ? { page } : null
+			}
+			return { data: { type: item.targetType, id: item.targetId } }
+		},
+		/**
+		 * The menu item an application opened on its own starts on: its first entry that is not a link.
+		 *
+		 * @return {object|null}
+		 */
+		firstStandalonePage() {
+			if (!this.isStandalone || this.openedFirstPage) {
+				return null
+			}
+			return this.menuItems.find(item => item.targetType !== 'url') ?? null
+		},
 		activePage() {
 			const pageId = this.$route.params.pageId
 			if (pageId === undefined) {
@@ -139,6 +242,9 @@ export default {
 	},
 
 	watch: {
+		menuItems() {
+			this.openFirstPageWhenStandalone()
+		},
 		activeContext: {
 			handler() {
 				if (this.errorMessage) {
@@ -162,14 +268,41 @@ export default {
 	},
 
 	async mounted() {
-		emit('toggle-navigation', {
-			open: false,
-		})
+		// An application opened on its own shows its menu in the navigation, which must stay open
+		if (!this.isStandalone) {
+			emit('toggle-navigation', {
+				open: false,
+			})
+		}
 		await this.reload()
+		this.openFirstPageWhenStandalone()
 	},
 
 	methods: {
 		...mapActions(useTablesStore, ['loadContext', 'loadContextPages', 'createContextPage', 'updateContextPage', 'deleteContextPage']),
+		/**
+		 * Navigates inside the app. NcButton cannot take a route itself: @nextcloud/vue brings its own
+		 * vue-router, whose router key the app's router does not provide, so its "to" renders a plain button.
+		 *
+		 * @param {string} route the route to open
+		 */
+		openRoute(route) {
+			this.$router.push(route).catch(err => err)
+		},
+		/**
+		 * An application opened on its own starts on its first menu item. Only once: the start
+		 * page stays reachable from the navigation afterwards.
+		 */
+		openFirstPageWhenStandalone() {
+			if (this.$route.params.itemName || this.$route.params.pageId) {
+				return
+			}
+			const first = this.firstStandalonePage
+			if (first) {
+				this.openedFirstPage = true
+				this.$router.replace(menuItemRoute(first, this.activeContext.id)).catch(err => err)
+			}
+		},
 		contextSignature() {
 			const ctx = this.activeContext
 			return ctx ? `${ctx.id}:${Object.keys(ctx.nodes || {}).sort().join(',')}` : null
@@ -314,6 +447,37 @@ export default {
 		margin-inline-start: 32px;
 	}
 
+	&__breadcrumb {
+		position: sticky;
+		top: 0;
+		z-index: 15;
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: calc(2 * var(--default-grid-baseline));
+		padding-block: calc(2 * var(--default-grid-baseline));
+		padding-inline: calc(var(--default-clickable-area) + 4 * var(--default-grid-baseline)) calc(4 * var(--default-grid-baseline));
+		border-bottom: 1px solid var(--color-border);
+		background-color: var(--color-main-background);
+	}
+
+	&__breadcrumb-separator {
+		color: var(--color-text-maxcontrast);
+	}
+
+	&__breadcrumb-current {
+		font-weight: bold;
+	}
+
+	&__breadcrumb-open {
+		margin-inline-start: auto;
+	}
+
+	&__menu-target {
+		width: 100%;
+		padding-block: calc(2 * var(--default-grid-baseline));
+	}
+
 	&__pages {
 		display: flex;
 		flex-wrap: wrap;
@@ -331,4 +495,10 @@ export default {
 .main-context-view {
 	width: 100%;
 }
+
+.context--standalone {
+	width: 100%;
+	// Leave room for the navigation toggle that floats over the top left corner of the content
+	padding-inline-start: var(--default-clickable-area);
+}
 </style>
diff --git a/src/router.js b/src/router.js
index 6d4e52b5d1..9cfb313453 100644
--- a/src/router.js
+++ b/src/router.js
@@ -28,6 +28,11 @@ export default createRouter({
 			component: Context,
 			name: 'contextPage',
 		},
+		{
+			path: '/application/:contextId/menu/:itemName',
+			component: Context,
+			name: 'contextMenuItem',
+		},
 		{
 			path: '/application/:contextId/row/:rowId',
 			component: Context,
diff --git a/src/shared/components/MenuItemIcon.vue b/src/shared/components/MenuItemIcon.vue
new file mode 100644
index 0000000000..abe8b06811
--- /dev/null
+++ b/src/shared/components/MenuItemIcon.vue
@@ -0,0 +1,44 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<AlertCircleOutline v-if="item.broken" :size="size" :title="t('tables', 'The page, view or table this entry opened no longer exists')" />
+	<ApplicationIcon v-else-if="item.icon" :icon-name="item.icon" :size="size" />
+	<OpenInNew v-else-if="item.targetType === 'url'" :size="size" />
+	<TableIcon v-else-if="item.targetType === 'table'" :size="size" />
+	<ViewDashboardOutline v-else :size="size" />
+</template>
+
+<script>
+import AlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'
+import OpenInNew from 'vue-material-design-icons/OpenInNew.vue'
+import TableIcon from 'vue-material-design-icons/Table.vue'
+import ViewDashboardOutline from 'vue-material-design-icons/ViewDashboardOutline.vue'
+import ApplicationIcon from './ApplicationIcon.vue'
+
+/**
+ * The icon of a menu entry: a warning when its target is gone, else the icon chosen for it,
+ * else one for what it opens.
+ */
+export default {
+	name: 'MenuItemIcon',
+	components: {
+		AlertCircleOutline,
+		ApplicationIcon,
+		OpenInNew,
+		TableIcon,
+		ViewDashboardOutline,
+	},
+	props: {
+		item: {
+			type: Object,
+			required: true,
+		},
+		size: {
+			type: Number,
+			default: 20,
+		},
+	},
+}
+</script>
diff --git a/src/shared/utils/menuItems.js b/src/shared/utils/menuItems.js
index 6c13ba6395..22a6f55a60 100644
--- a/src/shared/utils/menuItems.js
+++ b/src/shared/utils/menuItems.js
@@ -340,3 +340,29 @@ export function dragItemOver(items, draggedIndex, overIndex) {
 	}
 	return { items: rest, draggedIndex: rest.indexOf(placed[0]) }
 }
+
+/**
+ * Where a menu item leads inside the app, or null for an external link.
+ *
+ * @param {object} item a menu item
+ * @param {number|string} contextId the application the item belongs to
+ * @return {string|null}
+ */
+export function menuItemRoute(item, contextId) {
+	if (item.targetType === 'url') {
+		return null
+	}
+	return '/application/' + contextId + '/menu/' + item.technicalName
+}
+
+/**
+ * The menu as a tree: top-level items with their children, in menu order.
+ *
+ * @param {Array} menuItems stored items with id, order and parentId
+ * @return {Array<{item: object, children: Array<object>}>}
+ */
+export function menuTree(menuItems) {
+	const sorted = [...(menuItems ?? [])].sort((a, b) => a.order - b.order)
+	const roots = sorted.filter(item => item.parentId == null)
+	return roots.map(item => ({ item, children: sorted.filter(child => child.parentId === item.id) }))
+}