diff --git a/dubbo-admin-frontend/src/components/governance/AccessControl.vue b/dubbo-admin-frontend/src/components/governance/AccessControl.vue
index d4480ea..b9e4916 100644
--- a/dubbo-admin-frontend/src/components/governance/AccessControl.vue
+++ b/dubbo-admin-frontend/src/components/governance/AccessControl.vue
@@ -19,6 +19,9 @@
   <v-container grid-list-xl fluid>
     <v-layout row wrap>
       <v-flex lg12>
+        <breadcrumb title="accessControl" :items="breads"></breadcrumb>
+      </v-flex>
+      <v-flex lg12>
         <v-card flat color="transparent">
           <v-card-text>
             <v-form>
@@ -230,6 +233,7 @@
 <script>
 import AceEditor from '@/components/public/AceEditor'
 import Search from '@/components/public/Search'
+import Breadcrumb from '@/components/public/Breadcrumb'
 
 export default {
   name: 'AccessControl',
@@ -238,6 +242,16 @@
       {id: 0, title: 'serviceName', value: 'service'},
       {id: 1, title: 'app', value: 'application'}
     ],
+    breads: [
+      {
+        text: 'serviceGovernance',
+        href: ''
+      },
+      {
+        text: 'accessControl',
+        href: ''
+      }
+    ],
     selected: 0,
     filter: null,
     loading: false,
@@ -521,6 +535,7 @@
     this.search()
   },
   components: {
+    Breadcrumb,
     AceEditor,
     Search
   }
diff --git a/dubbo-admin-frontend/src/components/governance/LoadBalance.vue b/dubbo-admin-frontend/src/components/governance/LoadBalance.vue
index 42771d9..688ed49 100644
--- a/dubbo-admin-frontend/src/components/governance/LoadBalance.vue
+++ b/dubbo-admin-frontend/src/components/governance/LoadBalance.vue
@@ -19,6 +19,9 @@
   <v-container grid-list-xl fluid >
     <v-layout row wrap>
       <v-flex lg12>
+        <breadcrumb title="loadBalance" :items="breads"></breadcrumb>
+      </v-flex>
+      <v-flex lg12>
         <v-card flat color="transparent">
           <v-card-text>
             <v-form>
@@ -178,16 +181,28 @@
 <script>
   import AceEditor from '@/components/public/AceEditor'
   import Search from '@/components/public/Search'
+  import Breadcrumb from '@/components/public/Breadcrumb'
   export default {
     components: {
       AceEditor,
-      Search
+      Search,
+      Breadcrumb
     },
     data: () => ({
       items: [
         {id: 0, title: 'serviceName', value: 'service'},
         {id: 1, title: 'app', value: 'application'}
       ],
+      breads: [
+        {
+          text: 'serviceGovernance',
+          href: ''
+        },
+        {
+          text: 'loadBalance',
+          href: ''
+        }
+      ],
       selected: 0,
       dropdown_font: [ 'Service', 'App', 'IP' ],
       ruleKeys: ['method', 'strategy'],
diff --git a/dubbo-admin-frontend/src/components/governance/Overrides.vue b/dubbo-admin-frontend/src/components/governance/Overrides.vue
index d2f48b6..b685806 100644
--- a/dubbo-admin-frontend/src/components/governance/Overrides.vue
+++ b/dubbo-admin-frontend/src/components/governance/Overrides.vue
@@ -19,6 +19,9 @@
   <v-container grid-list-xl fluid >
     <v-layout row wrap>
       <v-flex lg12>
+        <breadcrumb title="dynamicConfig" :items="breads"></breadcrumb>
+      </v-flex>
+      <v-flex lg12>
         <v-card flat color="transparent">
           <v-card-text>
             <v-form>
@@ -160,16 +163,28 @@
   import yaml from 'js-yaml'
   import Search from '@/components/public/Search'
   import operations from '@/api/operation'
+  import Breadcrumb from '@/components/public/Breadcrumb'
   export default {
     components: {
       AceEditor,
-      Search
+      Search,
+      Breadcrumb
     },
     data: () => ({
       items: [
         {id: 0, title: 'serviceName', value: 'service'},
         {id: 1, title: 'app', value: 'application'}
       ],
+      breads: [
+        {
+          text: 'serviceGovernance',
+          href: ''
+        },
+        {
+          text: 'dynamicConfig',
+          href: ''
+        }
+      ],
       selected: 0,
       dropdown_font: [ 'Service', 'App', 'IP' ],
       pattern: 'Service',
diff --git a/dubbo-admin-frontend/src/components/governance/RoutingRule.vue b/dubbo-admin-frontend/src/components/governance/RoutingRule.vue
index a033c4b..2fe05b2 100644
--- a/dubbo-admin-frontend/src/components/governance/RoutingRule.vue
+++ b/dubbo-admin-frontend/src/components/governance/RoutingRule.vue
@@ -19,6 +19,9 @@
   <v-container grid-list-xl fluid >
     <v-layout row wrap>
       <v-flex lg12>
+        <breadcrumb title="routingRule" :items="breads"></breadcrumb>
+      </v-flex>
+      <v-flex lg12>
         <v-card flat color="transparent">
           <v-card-text>
             <v-form>
@@ -160,15 +163,27 @@
   import yaml from 'js-yaml'
   import AceEditor from '@/components/public/AceEditor'
   import operations from '@/api/operation'
+  import Breadcrumb from '@/components/public/Breadcrumb'
   export default {
     components: {
-      AceEditor
+      AceEditor,
+      Breadcrumb
     },
     data: () => ({
       items: [
         {id: 0, title: 'serviceName', value: 'service'},
         {id: 1, title: 'app', value: 'application'}
       ],
+      breads: [
+        {
+          text: 'serviceGovernance',
+          href: ''
+        },
+        {
+          text: 'routingRule',
+          href: ''
+        }
+      ],
       selected: 0,
       dropdown_font: [ 'Service', 'App', 'IP' ],
       ruleKeys: ['enabled', 'force', 'runtime', 'group', 'version', 'rule'],
diff --git a/dubbo-admin-frontend/src/components/governance/TagRule.vue b/dubbo-admin-frontend/src/components/governance/TagRule.vue
index 36434e3..82d4f95 100644
--- a/dubbo-admin-frontend/src/components/governance/TagRule.vue
+++ b/dubbo-admin-frontend/src/components/governance/TagRule.vue
@@ -18,6 +18,9 @@
 <template>
   <v-container grid-list-xl fluid >
     <v-layout row wrap>
+      <v-flex lg12>
+        <breadcrumb title="tagRule" :items="breads"></breadcrumb>
+      </v-flex>
       <v-flex xs12 >
         <search id="serviceSearch" v-model="filter" :submit="submit" :label="$t('searchTagRule')"></search>
       </v-flex>
@@ -98,11 +101,13 @@
   import AceEditor from '@/components/public/AceEditor'
   import operations from '@/api/operation'
   import Search from '@/components/public/Search'
+  import Breadcrumb from '@/components/public/Breadcrumb'
 
   export default {
     components: {
       AceEditor,
-      Search
+      Search,
+      Breadcrumb
     },
     data: () => ({
       dropdown_font: [ 'Service', 'App', 'IP' ],
@@ -118,6 +123,16 @@
         text: '',
         status: {}
       },
+      breads: [
+        {
+          text: 'serviceGovernance',
+          href: ''
+        },
+        {
+          text: 'tagRule',
+          href: ''
+        }
+      ],
       height: 0,
       operations: operations,
       tagRoutingRules: [
diff --git a/dubbo-admin-frontend/src/components/governance/WeightAdjust.vue b/dubbo-admin-frontend/src/components/governance/WeightAdjust.vue
index 8f266c2..2b0ba55 100644
--- a/dubbo-admin-frontend/src/components/governance/WeightAdjust.vue
+++ b/dubbo-admin-frontend/src/components/governance/WeightAdjust.vue
@@ -19,6 +19,9 @@
   <v-container grid-list-xl fluid >
     <v-layout row wrap>
       <v-flex lg12>
+        <breadcrumb title="weightAdjust" :items="breads"></breadcrumb>
+      </v-flex>
+      <v-flex lg12>
         <v-card flat color="transparent">
           <v-card-text>
             <v-form>
@@ -176,16 +179,28 @@
 <script>
   import AceEditor from '@/components/public/AceEditor'
   import Search from '@/components/public/Search'
+  import Breadcrumb from '@/components/public/Breadcrumb'
   export default {
     components: {
       AceEditor,
-      Search
+      Search,
+      Breadcrumb
     },
     data: () => ({
       items: [
         {id: 0, title: 'serviceName', value: 'service'},
         {id: 1, title: 'app', value: 'application'}
       ],
+      breads: [
+        {
+          text: 'serviceGovernance',
+          href: ''
+        },
+        {
+          text: 'weightAdjust',
+          href: ''
+        }
+      ],
       selected: 0,
       dropdown_font: [ 'Service', 'App', 'IP' ],
       ruleKeys: ['weight', 'address'],
diff --git a/dubbo-admin-frontend/src/components/public/Breadcrumb.vue b/dubbo-admin-frontend/src/components/public/Breadcrumb.vue
new file mode 100644
index 0000000..86e2dae
--- /dev/null
+++ b/dubbo-admin-frontend/src/components/public/Breadcrumb.vue
@@ -0,0 +1,54 @@
+<!--
+  - Licensed to the Apache Software Foundation (ASF) under one or more
+  - contributor license agreements.  See the NOTICE file distributed with
+  - this work for additional information regarding copyright ownership.
+  - The ASF licenses this file to You under the Apache License, Version 2.0
+  - (the "License"); you may not use this file except in compliance with
+  - the License.  You may obtain a copy of the License at
+  -
+  -     http://www.apache.org/licenses/LICENSE-2.0
+  -
+  - Unless required by applicable law or agreed to in writing, software
+  - distributed under the License is distributed on an "AS IS" BASIS,
+  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  - See the License for the specific language governing permissions and
+  - limitations under the License.
+  -->
+
+<template>
+  <div>
+    <h2>{{$t(title)}}</h2>
+    <v-breadcrumbs :items="items">
+      <template slot="item" slot-scope="props">
+        <span v-if="!props.item.strong">{{$t(props.item.text)}}</span>
+        <!--<a style="text-decoration: none" :href="props.item.href" class="black&#45;&#45;text" >{{ $t(props.item.text)}}</a>-->
+        <strong v-if="props.item.strong">
+          {{$t(props.item.text)}}
+          <span class="green--text">{{props.item.strong}}</span>
+        </strong>
+      </template>
+    </v-breadcrumbs>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'Breadcrumb',
+    props: {
+      title: {
+        type: String,
+        default: ''
+      },
+      items: {
+        type: Array,
+        default: []
+      }
+    },
+    data: () => ({
+    })
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/dubbo-admin-frontend/src/components/test/ServiceTest.vue b/dubbo-admin-frontend/src/components/test/ServiceTest.vue
index 35b9eec..57c3506 100644
--- a/dubbo-admin-frontend/src/components/test/ServiceTest.vue
+++ b/dubbo-admin-frontend/src/components/test/ServiceTest.vue
@@ -17,6 +17,9 @@
 <template>
   <v-container grid-list-xl fluid>
     <v-layout row wrap>
+      <v-flex lg12>
+        <breadcrumb title="serviceTest" :items="breads"></breadcrumb>
+      </v-flex>
       <v-flex xs12>
         <search v-model="filter" label="Search by service name" :submit="search"></search>
       </v-flex>
@@ -50,29 +53,45 @@
 <script>
   import JsonEditor from '@/components/public/JsonEditor'
   import Search from '@/components/public/Search'
+  import Breadcrumb from '@/components/public/Breadcrumb'
 
   export default {
     name: 'ServiceTest',
     components: {
       JsonEditor,
-      Search
+      Search,
+      Breadcrumb
     },
     data () {
       return {
         filter: this.$route.query['service'] || '',
-        headers: [
+        breads: [
           {
-            text: 'Method Name',
+            text: 'serviceSearch',
+            href: ''
+          }
+        ],
+        headers: [
+        ],
+        service: null,
+        methods: []
+      }
+    },
+    methods: {
+      setHeaders: function () {
+        this.headers = [
+          {
+            text: this.$t('methodName'),
             value: 'method',
             sortable: false
           },
           {
-            text: 'Parameter List',
+            text: this.$t('parameterList'),
             value: 'parameter',
             sortable: false
           },
           {
-            text: 'Return Type',
+            text: this.$t('returnType'),
             value: 'returnType',
             sortable: false
           },
@@ -81,12 +100,8 @@
             value: 'operation',
             sortable: false
           }
-        ],
-        service: null,
-        methods: []
-      }
-    },
-    methods: {
+        ]
+      },
       search () {
         if (!this.filter) {
           return
@@ -127,6 +142,16 @@
         return `/#/testMethod?application=${application}&service=${service}&method=${method}`
       }
     },
+    computed: {
+      area () {
+        return this.$i18n.locale
+      }
+    },
+    watch: {
+      area () {
+        this.setHeaders()
+      }
+    },
     created () {
       this.search()
     }
diff --git a/dubbo-admin-frontend/src/components/test/TestMethod.vue b/dubbo-admin-frontend/src/components/test/TestMethod.vue
index a5093f1..0d1d589 100644
--- a/dubbo-admin-frontend/src/components/test/TestMethod.vue
+++ b/dubbo-admin-frontend/src/components/test/TestMethod.vue
@@ -18,9 +18,12 @@
 <template>
   <v-container grid-list-xl fluid>
     <v-layout row wrap>
-      <v-flex class="test-form" lg12 xl6>
+      <v-flex lg12>
+        <breadcrumb title="testMethod" :items="breads"></breadcrumb>
+      </v-flex>
+    <v-flex class="test-form" lg12 xl6>
         <v-card>
-          <v-card-title class="headline">Test: {{service}}#{{method.name}}</v-card-title>
+          <v-card-title class="headline">{{$t('testMethod') + ': ' + method.signature}}</v-card-title>
           <v-card-text>
             <json-editor id="test" v-model="method.json"/>
           </v-card-text>
@@ -44,18 +47,32 @@
 
 <script>
   import JsonEditor from '@/components/public/JsonEditor'
+  import Breadcrumb from '@/components/public/Breadcrumb'
 
   export default {
     name: 'TestMethod',
     components: {
-      JsonEditor
+      JsonEditor,
+      Breadcrumb
     },
     data () {
       return {
+        breads: [
+          {
+            text: 'serviceSearch',
+            href: 'test'
+          },
+          {
+            text: 'serviceTest',
+            href: '',
+            strong: this.$route.query['service']
+          }
+        ],
         service: this.$route.query['service'],
         application: this.$route.query['application'],
         method: {
           name: null,
+          signature: this.$route.query['method'],
           parameterTypes: [],
           json: []
         },
diff --git a/dubbo-admin-frontend/src/lang/en.js b/dubbo-admin-frontend/src/lang/en.js
index 36fbe9e..364dae8 100644
--- a/dubbo-admin-frontend/src/lang/en.js
+++ b/dubbo-admin-frontend/src/lang/en.js
@@ -123,5 +123,6 @@
   name: 'Name',
   warnDeleteConfig: ' Are you sure to Delete Dubbo Config: ',
   configNameHint: "Application name the config belongs to, use 'global'(without quotes) for global config",
-  configContent: 'Config Content'
+  configContent: 'Config Content',
+  testMethod: 'Test Method'
 }
diff --git a/dubbo-admin-frontend/src/lang/zh.js b/dubbo-admin-frontend/src/lang/zh.js
index b57c5e6..26332ec 100644
--- a/dubbo-admin-frontend/src/lang/zh.js
+++ b/dubbo-admin-frontend/src/lang/zh.js
@@ -123,5 +123,6 @@
   name: '名称',
   warnDeleteConfig: ' 是否要删除Dubbo配置: ',
   configNameHint: '配置所属的应用名, global 表示全局配置',
-  configContent: '配置内容'
+  configContent: '配置内容',
+  testMethod: '测试方法'
 }