diff --git a/src/components/navigation/navigation.ts b/src/components/navigation/navigation.ts
index 19d3264..a3be0f3 100644
--- a/src/components/navigation/navigation.ts
+++ b/src/components/navigation/navigation.ts
@@ -1,5 +1,7 @@
 import {Component, Prop, Vue} from 'vue-property-decorator';
 import Constants from '@/constants';
+import {Course} from '@/components/app/app';
+import {CourseUtils} from '@/utils/course-utils';
 
 /**
  * This component is the top navigation bar
@@ -39,6 +41,11 @@ export default class Navigation extends Vue
         };
     }
 
+    public formatCourseIndex(course: Course)
+    {
+        return CourseUtils.formatTabIndex(course);
+    }
+
     /**
      * This function is called when the selection changes.
      *
diff --git a/src/components/navigation/navigation.vue b/src/components/navigation/navigation.vue
index d8d3106..44f35a4 100644
--- a/src/components/navigation/navigation.vue
+++ b/src/components/navigation/navigation.vue
@@ -12,7 +12,7 @@
             <el-submenu index="courses">
                 <template slot="title">Courses</template>
                 <el-menu-item v-for="course in courses"
-                              :index="`course/${course.id}/${course.name.toLowerCase().split(' ').join('-')}`"
+                              :index="formatCourseIndex(course)"
                               :key="course.name">{{course.name}}</el-menu-item>
             </el-submenu>