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..f58a281
--- /dev/null
+++ b/src/components/navigation/navigation.ts
@@ -0,0 +1,21 @@
+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";
+
+    /**
+     * 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..639205b
--- /dev/null
+++ b/src/components/navigation/navigation.vue
@@ -0,0 +1,14 @@
+<template>
+    <div id="navigation">
+        <el-menu :default-active="activeIndex" mode="horizontal" @select="onSelect">
+
+            <el-menu-item index="overall">Overall</el-menu-item>
+
+
+        </el-menu>
+        <div class="line"></div>
+    </div>
+</template>
+
+<script src="./navigation.ts" lang="ts"></script>
+<style src="./navigation.scss" lang="scss"></style>