diff --git a/kolibri/core/assets/src/utils/__test__/generateNavRoutes.spec.js b/kolibri/core/assets/src/composables/__tests__/generateNavRoutes.spec.js
similarity index 100%
rename from kolibri/core/assets/src/utils/__test__/generateNavRoutes.spec.js
rename to kolibri/core/assets/src/composables/__tests__/generateNavRoutes.spec.js
diff --git a/kolibri/core/assets/src/utils/generateNavRoutes.js b/kolibri/core/assets/src/composables/generateNavRoutes.js
similarity index 100%
rename from kolibri/core/assets/src/utils/generateNavRoutes.js
rename to kolibri/core/assets/src/composables/generateNavRoutes.js
diff --git a/kolibri/core/assets/src/composables/useNav.js b/kolibri/core/assets/src/composables/useNav.js
index 26c25722c5..a0f4917e33 100644
--- a/kolibri/core/assets/src/composables/useNav.js
+++ b/kolibri/core/assets/src/composables/useNav.js
@@ -3,7 +3,8 @@ import { KolibriIcons } from 'kolibri-design-system/lib/KIcon/iconDefinitions';
 import { get } from '@vueuse/core';
 import { UserKinds, NavComponentSections } from 'kolibri.coreVue.vuex.constants';
 import logger from 'kolibri.lib.logging';
-import { computed } from 'kolibri.lib.vueCompositionApi';
+import { computed, getCurrentInstance } from 'kolibri.lib.vueCompositionApi';
+import { generateNavRoute } from './generateNavRoutes';
 
 const logging = logger.getLogger(__filename);
 
@@ -75,13 +76,26 @@ export const registerNavItem = component => {
   }
 };
 
-export default function useNav() {
+export default function useNav(store) {
+  store = store || getCurrentInstance().proxy.$store;
+  const route = computed(() => store.state.route);
   const { windowIsSmall } = useKResponsiveWindow();
   const topBarHeight = computed(() => (get(windowIsSmall) ? 56 : 64));
-  const exportedItems = navItems.map(component => ({
-    ...component,
-    active: window.location.pathname == component.url,
-  }));
+  const exportedItems = computed(() =>
+    navItems.map(item => {
+      const output = {
+        ...item,
+        active: window.location.pathname == item.url,
+      };
+      if (item.routes) {
+        output.routes = item.routes.map(routeItem => ({
+          ...routeItem,
+          href: generateNavRoute(item.url, routeItem.route, get(route).params),
+        }));
+      }
+      return output;
+    }),
+  );
   return {
     navItems: exportedItems,
     topBarHeight,
diff --git a/kolibri/core/assets/src/views/AppBar.vue b/kolibri/core/assets/src/views/AppBar.vue
index 3588dca569..7240be71e5 100644
--- a/kolibri/core/assets/src/views/AppBar.vue
+++ b/kolibri/core/assets/src/views/AppBar.vue
@@ -159,7 +159,7 @@
       const { isLearner, isUserLoggedIn, username, full_name } = useUser();
       const { totalPoints, fetchPoints } = useTotalProgress();
       const links = computed(() => {
-        const currentItem = navItems.find(nc => nc.url === window.location.pathname);
+        const currentItem = get(navItems).find(nc => nc.url === window.location.pathname);
         if (!currentItem || !currentItem.routes) {
           return [];
         }
diff --git a/kolibri/core/assets/src/views/BottomNavigationBar.vue b/kolibri/core/assets/src/views/BottomNavigationBar.vue
index ee225641fc..cebe134162 100644
--- a/kolibri/core/assets/src/views/BottomNavigationBar.vue
+++ b/kolibri/core/assets/src/views/BottomNavigationBar.vue
@@ -9,7 +9,7 @@
       :key="key"
     >
       <a
-        :href="generateNavRoute(routeDefinition.route)"
+        :href="routeDefinition.href"
         tabindex="-1"
         class="nav-menu-item"
         :style="{ textDecoration: 'none' }"
@@ -65,7 +65,6 @@
 <script>
 
   import commonCoreStrings from '../mixins/commonCoreStrings';
-  import { generateNavRoute } from '../utils/generateNavRoutes';
 
   export default {
     name: 'BottomNavigationBar',
@@ -95,15 +94,8 @@
       routes() {
         return this.bottomMenuItem.routes || [];
       },
-      url() {
-        return this.bottomMenuItem.url || '';
-      },
     },
     methods: {
-      generateNavRoute(route) {
-        const params = this.$route.params;
-        return generateNavRoute(this.url, route, params);
-      },
       isActiveLink(route) {
         return this.bottomMenuItem.active && route == this.$router.currentRoute.path;
       },
diff --git a/kolibri/core/assets/src/views/CoreMenu/CoreMenuOption.vue b/kolibri/core/assets/src/views/CoreMenu/CoreMenuOption.vue
index 4689ac3eaf..368a76f492 100644
--- a/kolibri/core/assets/src/views/CoreMenu/CoreMenuOption.vue
+++ b/kolibri/core/assets/src/views/CoreMenu/CoreMenuOption.vue
@@ -85,7 +85,7 @@
           </router-link>
           <a
             v-else
-            :href="generateNavRoute(subRoute.route)"
+            :href="subRoute.href"
             class="link"
             :class="subRouteInactiveClass"
           >
@@ -102,7 +102,6 @@
 <script>
 
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import { generateNavRoute } from '../../utils/generateNavRoutes';
 
   export default {
     name: 'CoreMenuOption',
@@ -136,7 +135,8 @@
         required: false,
         default: () => [],
         // subRoutes should be an array of objects with the name, label, and route properties
-        validate: subRoutes => subRoutes.every(route => route.name && route.label && route.route),
+        validate: subRoutes =>
+          subRoutes.every(route => route.name && route.label && route.route && route.href),
       },
       disabled: {
         type: Boolean,
@@ -226,10 +226,6 @@
         }
         return true;
       },
-      generateNavRoute(route) {
-        const params = this.$route.params;
-        return generateNavRoute(this.link, route, params);
-      },
       conditionalEmit() {
         if (this.disabled || this.link) {
           return;