diff --git a/src/components/Navigation/Navigation.stories.js b/src/components/Navigation/Navigation.stories.js
index 1030478d6..6bdd446c1 100644
--- a/src/components/Navigation/Navigation.stories.js
+++ b/src/components/Navigation/Navigation.stories.js
@@ -70,81 +70,81 @@ export const Default = {
 				icon: 'Settings',
 				url: '#',
 				addMargin: true,
-				submenu: [
-					{
+				submenu: {
+					context: {
 						name: 'Journal',
 						url: '#',
 						isCurrent: false,
 						icon: '',
 					},
-					{
+					website: {
 						name: 'Website',
 						url: '#',
 						isCurrent: false,
 						icon: '',
 					},
-					{
+					workflow: {
 						name: 'Workflow',
 						url: '#',
 						isCurrent: false,
 						icon: '',
 					},
-					{
+					distribution: {
 						name: 'Distribution',
 						url: '#',
 						isCurrent: false,
 						icon: '',
 					},
-					{
+					access: {
 						name: 'Users & Roles',
 						url: '#',
 						isCurrent: false,
 						icon: '',
 					},
-				],
+				},
 			},
 			{
 				name: 'Statistics',
 				icon: 'Statistics',
 				url: '#',
-				submenu: [
-					{
+				submenu: {
+					publications: {
 						name: 'Articles',
 						url: '#',
 						isCurrent: false,
 						icon: '',
 					},
-					{
+					issues: {
 						name: 'Issues',
 						url: '#',
 						isCurrent: false,
 						icon: '',
 					},
-					{
+					context: {
 						name: 'Journal',
 						url: '#',
 						isCurrent: false,
 						icon: '',
 					},
-					{
+					editorial: {
 						name: 'Editorial Activity',
 						url: '#',
 						isCurrent: false,
 						icon: '',
 					},
-					{
+					users: {
 						name: 'Users',
 						url: '#',
 						isCurrent: false,
 						icon: '',
 					},
-					{
+					reports: {
 						name: 'Reports',
 						url: '#',
 						isCurrent: false,
 						icon: '',
 					},
-				],
+				},
 			},
 			{
 				name: 'Tools',
diff --git a/src/components/Navigation/Navigation.vue b/src/components/Navigation/Navigation.vue
index 7ea864af8..6c2d7b70f 100644
--- a/src/components/Navigation/Navigation.vue
+++ b/src/components/Navigation/Navigation.vue
@@ -49,9 +49,9 @@
 			</div>
 			<ul>
 				<li
-					v-for="(link, index) in currentLink.submenu"
-					:key="index"
-					@click="handleSecondNav(currentLink.submenu, index)"
+					v-for="(link, key) in currentLink.submenu"
+					:key="key"
+					@click="handleSecondNav(currentLink.submenu, key)"
 				>
 					<PkpButton
 						element="a"
@@ -92,9 +92,9 @@ function toggleNav() {
 	collapsed.value = !collapsed.value;
 }
 
-function handleSecondNav(submenu = [], index = 0) {
-	submenu.forEach((link, i) => {
-		link.isCurrent = i === index;
+function handleSecondNav(submenu = [], smKey) {
+	Object.keys(submenu).forEach((key) => {
+		submenu[key].isCurrent = key === smKey;
 	});
 }
 
@@ -103,6 +103,7 @@ function handleClick(index) {
 		link.isCurrent = i === index;
 	});
 	currentLink.value = props.links[index];
-	handleSecondNav(props.links[index]?.submenu, 0);
+	const submenu = props.links[index]?.submenu || [];
+	handleSecondNav(submenu, Object.keys(submenu)[0]);
 }
 </script>