diff --git a/src/components/app/app.ts b/src/components/app/app.ts
index 8ffec8d..5c9280c 100644
--- a/src/components/app/app.ts
+++ b/src/components/app/app.ts
@@ -1,8 +1,9 @@
 import {Component, Vue} from 'vue-property-decorator';
 import Login from '@/components/login/login';
+import Navigation from '@/components/navigation/navigation';
 
 @Component({
-    components: {Login},
+    components: {Login, Navigation},
 })
 export default class App extends Vue
 {
diff --git a/src/components/app/app.vue b/src/components/app/app.vue
index 06e3776..9e2c45e 100644
--- a/src/components/app/app.vue
+++ b/src/components/app/app.vue
@@ -1,7 +1,7 @@
 <template>
     <div id="app">
         <login v-if="showLogin" v-on:login:courses="onLogin"></login>
-
+        <navigation :courses="courses"></navigation>
     </div>
 </template>
 
diff --git a/src/components/navigation/navigation.scss b/src/components/navigation/navigation.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/navigation/navigation.ts b/src/components/navigation/navigation.ts
new file mode 100644
index 0000000..ccfaab8
--- /dev/null
+++ b/src/components/navigation/navigation.ts
@@ -0,0 +1,23 @@
+import {Component, Prop, Vue} from 'vue-property-decorator';
+import Constants from '@/constants';
+
+/**
+ * This component is the top navigation bar
+ */
+@Component({
+    components: {},
+})
+export default class Navigation extends Vue
+{
+    public activeIndex: string = "0";
+
+    @Prop() courses: any;
+
+    /**
+     * This function is called when the selection changes.
+     */
+    public onSelect()
+    {
+
+    }
+}
diff --git a/src/components/navigation/navigation.vue b/src/components/navigation/navigation.vue
new file mode 100644
index 0000000..e994c75
--- /dev/null
+++ b/src/components/navigation/navigation.vue
@@ -0,0 +1,18 @@
+<template>
+    <div id="navigation">
+        <el-menu :default-active="activeIndex" mode="horizontal" @select="onSelect">
+
+            <el-menu-item index="overall">Overall</el-menu-item>
+
+            <el-submenu index="courses">
+                <template slot="title">Courses</template>
+                <el-menu-item v-for="course in courses" :index="`courses-${course}`">{{course}}</el-menu-item>
+            </el-submenu>
+
+        </el-menu>
+        <div class="line"></div>
+    </div>
+</template>
+
+<script src="./navigation.ts" lang="ts"></script>
+<style src="./navigation.scss" lang="scss"></style>