diff --git a/components/common/topic/index.js b/components/common/topic/index.js
new file mode 100644
index 0000000..cdfd10e
--- /dev/null
+++ b/components/common/topic/index.js
@@ -0,0 +1,9 @@
+import TopicNav from './main'
+
+export const topicNav = {
+  install(Vue) {
+    Vue.component('topic-nav', TopicNav)
+  }
+}
+
+export default topicNav
diff --git a/components/common/topic/main.vue b/components/common/topic/main.vue
new file mode 100644
index 0000000..739c16c
--- /dev/null
+++ b/components/common/topic/main.vue
@@ -0,0 +1,43 @@
+<template>
+  <el-row class="wrapper">
+    <el-col style="margin-bottom: 1rem;">
+      <el-menu type="border-card" :default-active="currentTopic" style="margin-top: -2px;border: 0;" mode="horizontal"
+               @select="handleSelectTopic">
+        <el-menu-item index="news">最新</el-menu-item>
+        <el-menu-item v-for="topic in topicNavs" :key="topic.idTopic" :index="topic.topicUri">{{topic.topicTitle}}
+        </el-menu-item>
+      </el-menu>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+  import {mapState} from 'vuex'
+
+  export default {
+    name: "topicNav",
+    props: {
+      currentTopic: {
+        type: String,
+        default: 'news'
+      }
+    },
+    computed: {
+      ...mapState({
+        topicNavs: state => state.topic.data,
+        isFetching: state => state.topic.fetching
+      })
+    },
+    methods: {
+      handleSelectTopic(item) {
+        this.$router.push({
+          path: '/topic/' + item
+        });
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/pages/topic/_topic_uri.vue b/pages/topic/_topic_uri.vue
index aba758e..5ab2a49 100644
--- a/pages/topic/_topic_uri.vue
+++ b/pages/topic/_topic_uri.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="topic-archive-page">
+    <topic-nav :currentTopic="defaultParams.topic_uri"></topic-nav>
     <article-list :articles="articles" @currentChange="currentChangeArticle"/>
   </div>
 </template>
@@ -13,6 +14,9 @@
       ArticleList
     },
     validate({ params, store }) {
+      if (params.topic_uri === 'news') {
+        return true;
+      }
       return params.topic_uri && store.state.topic.data.some(
         topic => topic.topicUri === params.topic_uri
       )
@@ -25,6 +29,9 @@
         return this.$store.state.article.list.data
       },
       currentTopic() {
+        if (this.$route.params.topic_uri === 'news') {
+          return true;
+        }
         return this.$store.state.topic.data.find(
           topic => topic.topicUri === this.$route.params.topic_uri
         )
@@ -42,6 +49,7 @@
     },
     mounted() {
       this.$store.commit('setActiveMenu', 'topic');
+      console.log(this.defaultParams)
     },
     created() {
       if (!this.currentTopic) {
diff --git a/plugins/extend.js b/plugins/extend.js
index fbb82a2..fd7e8ad 100644
--- a/plugins/extend.js
+++ b/plugins/extend.js
@@ -1,3 +1,5 @@
 import Vue from 'vue'
 import CommentBox from '~/components/common/comment'
+import TopicNavBox from '~/components/common/topic'
 Vue.use(CommentBox)
+Vue.use(TopicNavBox)
diff --git a/store/topic.js b/store/topic.js
index 5d3a437..b133e2f 100644
--- a/store/topic.js
+++ b/store/topic.js
@@ -1,7 +1,7 @@
 /**
  * @file 分类数据状态 / ES module
  * @module store/category
- * @author Surmon <https://github.com/surmon-china>
+ * @author Ronger <https://github.com/ronger-x>
  */
 
 export const TOPIC_API_PATH = '/api/topic'
@@ -24,8 +24,7 @@ export const mutations = {
 
 export const actions = {
   fetchList({ commit }, params) {
-    commit('updateFetching', true)
-    console.log(params)
+    commit('updateFetching', true);
     return this.$axios
       .$get(`${TOPIC_API_PATH}/topic-nav`)
       .then(response => {