diff --git a/app/src/modules/docs/components/navigation.vue b/app/src/modules/docs/components/navigation.vue
index 1c0587d057..cb5dfe92ff 100644
--- a/app/src/modules/docs/components/navigation.vue
+++ b/app/src/modules/docs/components/navigation.vue
@@ -10,15 +10,15 @@ import NavigationItem from './navigation-item.vue';
 import { nav } from '@directus/docs';
 
 function spreadPath(path: string) {
-	const sections = path.substr(1).split('/')
-	if(sections.length === 0) return []
+	const sections = path.substr(1).split('/');
+	if (sections.length === 0) return [];
 
-	const paths: string[] = ['/'+sections[0]]
+	const paths: string[] = ['/' + sections[0]];
 
-	for(let i = 1; i < sections.length; i++) {
-		paths.push(paths[i - 1] + '/' + sections[i])
+	for (let i = 1; i < sections.length; i++) {
+		paths.push(paths[i - 1] + '/' + sections[i]);
 	}
-	return paths
+	return paths;
 }
 
 export default defineComponent({
@@ -26,33 +26,38 @@ export default defineComponent({
 	props: {
 		path: {
 			type: String,
-			default: null
-		}
+			default: '/docs',
+		},
 	},
 	setup(props) {
-		const _selection = ref<string[]>(spreadPath(props.path.replace('/docs','')))
+		const _selection = ref<string[] | null>(null);
 
-		watch(() => props.path, (newPath) => {
-			_selection.value = spreadPath(newPath.replace('/docs',''))
-		})
+		watch(
+			() => props.path,
+			(newPath) => {
+				if (newPath === null) return;
+				_selection.value = spreadPath(newPath.replace('/docs', ''));
+			}
+		);
 
 		const selection = computed({
 			get() {
-				return _selection.value
+				if (_selection.value === null && props.path !== null)
+					_selection.value = spreadPath(props.path.replace('/docs', ''));
+				return _selection.value || [];
 			},
 			set(newSelection: string[]) {
-				if(newSelection.length === 0) {
-					_selection.value =  []
+				if (newSelection.length === 0) {
+					_selection.value = [];
 				} else {
-					if(_selection.value.includes(newSelection[0])) {
-						_selection.value = _selection.value.filter(s => s !== newSelection[0])
+					if (_selection.value && _selection.value.includes(newSelection[0])) {
+						_selection.value = _selection.value.filter((s) => s !== newSelection[0]);
 					} else {
-						_selection.value = spreadPath(newSelection[0])
+						_selection.value = spreadPath(newSelection[0]);
 					}
-					
 				}
-			}
-		})
+			},
+		});
 
 		return { navSections: nav.app, selection };
 	},
diff --git a/app/src/modules/docs/index.ts b/app/src/modules/docs/index.ts
index 4ec6d8547f..400ce4415d 100644
--- a/app/src/modules/docs/index.ts
+++ b/app/src/modules/docs/index.ts
@@ -31,14 +31,15 @@ export default defineModule(({ i18n }) => {
 		for (const doc of directory.children) {
 			if (doc.type === 'file') {
 				routes.push({
-					path: '/' + doc.path.replace('.md', '').replaceAll('\\','/'),
+					path: '/' + doc.path.replace('.md', '').replaceAll('\\', '/'),
 					component: StaticDocs,
 				});
 			} else if (doc.type === 'directory') {
-				routes.push({
-					path: '/' + doc.path.replaceAll('\\','/'),
-					redirect: '/' + doc.children![0].path.replace('.md', '').replaceAll('\\','/'),
-				});
+				if (doc.path && doc.children && doc.children.length > 0)
+					routes.push({
+						path: '/' + doc.path.replaceAll('\\', '/'),
+						redirect: '/' + doc.children![0].path.replace('.md', '').replaceAll('\\', '/'),
+					});
 
 				routes.push(...parseRoutes(doc));
 			}