diff --git a/app/src/components/Breadcrumb.vue b/app/src/components/Breadcrumb.vue
new file mode 100644
index 00000000..0018644f
--- /dev/null
+++ b/app/src/components/Breadcrumb.vue
@@ -0,0 +1,37 @@
+<template>
+    <b-breadcrumb>
+        <b-breadcrumb-item to="/">
+            <span class="sr-only">{{ $t('home') }}</span>
+            <icon iname="home"/>
+        </b-breadcrumb-item>
+        <b-breadcrumb-item
+            v-for="(route, index) in breadcrumb"
+            :key="index"
+            :to="{name: route.name}"
+            :active="index == lastIndex ? true : false"
+            >{{ route.trad ? $t(route.trad) : params[route.param] }}</b-breadcrumb-item>
+    </b-breadcrumb>
+</template>
+
+<script>
+export default {
+    computed: {
+        params: function () {
+            return this.$route.params
+        },
+        breadcrumb: function () {
+            return this.$route.meta.breadcrumb
+        },
+        lastIndex: function () {
+            return this.breadcrumb.length - 1
+        },
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.breadcrumb {
+    border: none;
+    background-color: transparent;
+}
+</style>
diff --git a/app/src/routes.js b/app/src/routes.js
index 3ec087bf..b1ad44c7 100644
--- a/app/src/routes.js
+++ b/app/src/routes.js
@@ -3,8 +3,10 @@ import Login from './views/Login'
 
 
 const routes = [
-    {path: '/', component: Home},
-    {path: '/login', component: Login, meta: {noAuth: true}},
+    {name: 'home', path: '/', component: Home},
+    {name: 'login', path: '/login', component: Login, meta: {
+        noAuth: true
+    }},
 ]
 
 export default routes