diff --git a/app/src/components/globals/Breadcrumb.vue b/app/src/components/globals/Breadcrumb.vue
index bb8fad4b..b6b3f66a 100644
--- a/app/src/components/globals/Breadcrumb.vue
+++ b/app/src/components/globals/Breadcrumb.vue
@@ -1,16 +1,15 @@
 <template>
-  <b-breadcrumb v-if="breadcrumb && breadcrumb.length">
+  <b-breadcrumb v-if="routesList">
     <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"
+      v-for="{ name, text } in breadcrumb" :key="name"
+      :to="{ name }" :active="name === $route.name"
     >
-      {{ route.text }}
+      {{ text }}
     </b-breadcrumb-item>
   </b-breadcrumb>
 </template>
@@ -20,29 +19,36 @@ export default {
   name: 'Breadcrumb',
 
   computed: {
-    params: function () {
-      return this.$route.params
+    routesList () {
+      const routesList = this.$route.meta.breadcrumb
+      return routesList && routesList.length ? routesList : null
     },
 
-    breadcrumb: function () {
-      if (!this.$route.meta.breadcrumb) return null
-      return this.$route.meta.breadcrumb.map(({ name, trad, param }) => {
+    breadcrumb () {
+      if (!this.routesList) return
+      // Get current params to pass it to potential previous routes
+      const currentParams = this.$route.params
+      return this.routesList.map(name => {
+        const { trad, param } = this.getRouteArgs(name)
         let text = ''
         // if a traduction key string has been given and we also need to pass
         // the route param as a variable.
         if (trad && param) {
-          text = this.$i18n.t(trad, { [param]: this.params[param] })
+          text = this.$i18n.t(trad, { [param]: currentParams[param] })
         } else if (trad) {
           text = this.$i18n.t(trad)
         } else {
-          text = this.params[param]
+          text = currentParams[param]
         }
         return { name, text }
       })
-    },
+    }
+  },
 
-    lastIndex: function () {
-      return this.breadcrumb.length - 1
+  methods: {
+    getRouteArgs (routeName) {
+      const route = this.$router.options.routes.find(route => route.name === routeName)
+      return route ? route.meta.args : {}
     }
   }
 }
diff --git a/app/src/router/routes.js b/app/src/router/routes.js
index 321f9cdc..04a94c45 100644
--- a/app/src/router/routes.js
+++ b/app/src/router/routes.js
@@ -1,3 +1,8 @@
+/**
+ * routes module.
+ * @module router/routes
+ */
+
 import Home from '@/views/Home'
 import Login from '@/views/Login'
 import ToolList from '@/views/tool/ToolList'
@@ -26,7 +31,7 @@ const routes = [
     path: '/postinstall',
     component: () => import(/* webpackChunkName: "views/post-install" */ '@/views/PostInstall'),
     // Leave the breadcrumb
-    meta: { noAuth: true }
+    meta: { noAuth: true, breadcrumb: [] }
   },
 
   /* ───────╮
@@ -36,17 +41,18 @@ const routes = [
     name: 'user-list',
     path: '/users',
     component: () => import(/* webpackChunkName: "views/user/list" */ '@/views/user/UserList'),
-    meta: { breadcrumb: [{ name: 'user-list', trad: 'users' }] }
+    meta: {
+      args: { trad: 'users' },
+      breadcrumb: ['user-list']
+    }
   },
   {
     name: 'user-create',
     path: '/users/create',
     component: () => import(/* webpackChunkName: "views/user/create" */ '@/views/user/UserCreate'),
     meta: {
-      breadcrumb: [
-        { name: 'user-list', trad: 'users' },
-        { name: 'user-create', trad: 'users_new' }
-      ]
+      args: { trad: 'users_new' },
+      breadcrumb: ['user-list', 'user-create']
     }
   },
   {
@@ -55,10 +61,8 @@ const routes = [
     component: () => import(/* webpackChunkName: "views/user/info" */ '@/views/user/UserInfo'),
     props: true,
     meta: {
-      breadcrumb: [
-        { name: 'user-list', trad: 'users' },
-        { name: 'user-info', param: 'name' }
-      ]
+      args: { param: 'name' },
+      breadcrumb: ['user-list', 'user-info']
     }
   },
   {
@@ -67,11 +71,8 @@ const routes = [
     component: () => import(/* webpackChunkName: "views/user/edit" */ '@/views/user/UserEdit'),
     props: true,
     meta: {
-      breadcrumb: [
-        { name: 'user-list', trad: 'users' },
-        { name: 'user-info', param: 'name' },
-        { name: 'user-edit', param: 'name', trad: 'user_username_edit' }
-      ]
+      args: { param: 'name', trad: 'user_username_edit' },
+      breadcrumb: ['user-list', 'user-info', 'user-edit']
     }
   },
 
@@ -83,10 +84,8 @@ const routes = [
     path: '/groups',
     component: () => import(/* webpackChunkName: "views/group/list" */ '@/views/group/GroupList'),
     meta: {
-      breadcrumb: [
-        { name: 'user-list', trad: 'users' },
-        { name: 'group-list', trad: 'groups_and_permissions' }
-      ]
+      args: { trad: 'groups_and_permissions' },
+      breadcrumb: ['user-list', 'group-list']
     }
   },
   {
@@ -94,11 +93,8 @@ const routes = [
     path: '/groups/create',
     component: () => import(/* webpackChunkName: "views/group/create" */ '@/views/group/GroupCreate'),
     meta: {
-      breadcrumb: [
-        { name: 'user-list', trad: 'users' },
-        { name: 'group-list', trad: 'groups_and_permissions' },
-        { name: 'group-create', trad: 'group_new' }
-      ]
+      args: { trad: 'group_new' },
+      breadcrumb: ['user-list', 'group-list', 'group-create']
     }
   },
 
@@ -110,9 +106,8 @@ const routes = [
     path: '/domains',
     component: () => import(/* webpackChunkName: "views/domain/list" */ '@/views/domain/DomainList'),
     meta: {
-      breadcrumb: [
-        { name: 'domain-list', trad: 'domains' }
-      ]
+      args: { trad: 'domains' },
+      breadcrumb: ['domain-list']
     }
   },
   {
@@ -120,10 +115,8 @@ const routes = [
     path: '/domains/add',
     component: () => import(/* webpackChunkName: "views/domain/add" */ '@/views/domain/DomainAdd'),
     meta: {
-      breadcrumb: [
-        { name: 'domain-list', trad: 'domains' },
-        { name: 'domain-add', trad: 'domain_add' }
-      ]
+      args: { trad: 'domain_add' },
+      breadcrumb: ['domain-list', 'domain-add']
     }
   },
   {
@@ -132,10 +125,8 @@ const routes = [
     component: () => import(/* webpackChunkName: "views/domain/info" */ '@/views/domain/DomainInfo'),
     props: true,
     meta: {
-      breadcrumb: [
-        { name: 'domain-list', trad: 'domains' },
-        { name: 'domain-info', param: 'name' }
-      ]
+      args: { param: 'name' },
+      breadcrumb: ['domain-list', 'domain-info']
     }
   },
   {
@@ -144,11 +135,8 @@ const routes = [
     component: () => import(/* webpackChunkName: "views/domain/dns" */ '@/views/domain/DomainDns'),
     props: true,
     meta: {
-      breadcrumb: [
-        { name: 'domain-list', trad: 'domains' },
-        { name: 'domain-info', param: 'name' },
-        { name: 'domain-dns', trad: 'dns' }
-      ]
+      args: { trad: 'dns' },
+      breadcrumb: ['domain-list', 'domain-info', 'domain-dns']
     }
   },
   {
@@ -157,11 +145,8 @@ const routes = [
     component: () => import(/* webpackChunkName: "views/domain/cert" */ '@/views/domain/DomainCert'),
     props: true,
     meta: {
-      breadcrumb: [
-        { name: 'domain-list', trad: 'domains' },
-        { name: 'domain-info', param: 'name' },
-        { name: 'domain-cert', trad: 'certificate' }
-      ]
+      args: { trad: 'certificate' },
+      breadcrumb: ['domain-list', 'domain-info', 'domain-cert']
     }
   },
 
@@ -172,17 +157,18 @@ const routes = [
     name: 'app-list',
     path: '/apps',
     component: () => import(/* webpackChunkName: "views/apps/list" */ '@/views/app/AppList'),
-    meta: { breadcrumb: [{ name: 'app-list', trad: 'applications' }] }
+    meta: {
+      args: { trad: 'applications' },
+      breadcrumb: ['app-list']
+    }
   },
   {
     name: 'app-catalog',
     path: '/apps/catalog',
     component: () => import(/* webpackChunkName: "views/apps/catalog" */ '@/views/app/AppCatalog'),
     meta: {
-      breadcrumb: [
-        { name: 'app-list', trad: 'applications' },
-        { name: 'app-catalog', trad: 'catalog' }
-      ]
+      args: { trad: 'catalog' },
+      breadcrumb: ['app-list', 'app-catalog']
     }
   },
   {
@@ -191,11 +177,8 @@ const routes = [
     component: () => import(/* webpackChunkName: "views/apps/install" */ '@/views/app/AppInstall'),
     props: true,
     meta: {
-      breadcrumb: [
-        { name: 'app-list', trad: 'applications' },
-        { name: 'app-catalog', trad: 'catalog' },
-        { name: 'app-catalog', trad: 'install_name', param: 'id' }
-      ]
+      args: { trad: 'install_name', param: 'id' },
+      breadcrumb: ['app-list', 'app-catalog', 'app-install']
     }
   },
   {
@@ -204,11 +187,8 @@ const routes = [
     component: () => import(/* webpackChunkName: "views/apps/install" */ '@/views/app/AppInstall'),
     props: true,
     meta: {
-      breadcrumb: [
-        { name: 'app-list', trad: 'applications' },
-        { name: 'app-catalog', trad: 'catalog' },
-        { name: 'app-catalog', trad: 'install_name', param: 'id' }
-      ]
+      args: { trad: 'install_name', param: 'id' },
+      breadcrumb: ['app-list', 'app-catalog', 'app-install-custom']
     }
   },
   {
@@ -217,10 +197,8 @@ const routes = [
     component: () => import(/* webpackChunkName: "views/apps/info" */ '@/views/app/AppInfo'),
     props: true,
     meta: {
-      breadcrumb: [
-        { name: 'app-list', trad: 'applications' },
-        { name: 'app-info', param: 'id' }
-      ]
+      args: { param: 'id' },
+      breadcrumb: ['app-list', 'app-info']
     }
   },
   {
@@ -229,11 +207,8 @@ const routes = [
     component: () => import(/* webpackChunkName: "views/apps/actions" */ '@/views/app/AppActions'),
     props: true,
     meta: {
-      breadcrumb: [
-        { name: 'app-list', trad: 'applications' },
-        { name: 'app-info', param: 'id' },
-        { name: 'app-actions', trad: 'app_actions' }
-      ]
+      args: { trad: 'app_actions' },
+      breadcrumb: ['app-list', 'app-info', 'app-actions']
     }
   },
   {
@@ -242,11 +217,8 @@ const routes = [
     component: () => import(/* webpackChunkName: "views/apps/config" */ '@/views/app/AppConfigPanel'),
     props: true,
     meta: {
-      breadcrumb: [
-        { name: 'app-list', trad: 'applications' },
-        { name: 'app-info', param: 'id' },
-        { name: 'app-config-panel', trad: 'app_config_panel' }
-      ]
+      args: { trad: 'app_config_panel' },
+      breadcrumb: ['app-list', 'app-info', 'app-config-panel']
     }
   },
 
@@ -258,9 +230,8 @@ const routes = [
     path: '/update',
     component: () => import(/* webpackChunkName: "views/update" */ '@/views/update/SystemUpdate'),
     meta: {
-      breadcrumb: [
-        { name: 'update', trad: 'system_update' }
-      ]
+      args: { trad: 'system_update' },
+      breadcrumb: ['update']
     }
   },
 
@@ -272,9 +243,8 @@ const routes = [
     path: '/services',
     component: () => import(/* webpackChunkName: "views/service/list" */ '@/views/service/ServiceList'),
     meta: {
-      breadcrumb: [
-        { name: 'service-list', trad: 'services' }
-      ]
+      args: { trad: 'services' },
+      breadcrumb: ['service-list']
     }
   },
   {
@@ -283,10 +253,8 @@ const routes = [
     component: () => import(/* webpackChunkName: "views/service/info" */ '@/views/service/ServiceInfo'),
     props: true,
     meta: {
-      breadcrumb: [
-        { name: 'service-list', trad: 'services' },
-        { name: 'service-info', param: 'name' }
-      ]
+      args: { param: 'name' },
+      breadcrumb: ['service-list', 'service-info']
     }
   },
 
@@ -298,9 +266,8 @@ const routes = [
     path: '/tools',
     component: ToolList,
     meta: {
-      breadcrumb: [
-        { name: 'tool-list', trad: 'tools' }
-      ]
+      args: { trad: 'tools' },
+      breadcrumb: ['tool-list']
     }
   },
   {
@@ -308,10 +275,8 @@ const routes = [
     path: '/tools/logs',
     component: () => import(/* webpackChunkName: "views/tools/logs" */ '@/views/tool/ToolLogs'),
     meta: {
-      breadcrumb: [
-        { name: 'tool-list', trad: 'tools' },
-        { name: 'tool-logs', trad: 'logs' }
-      ]
+      args: { trad: 'logs' },
+      breadcrumb: ['tool-list', 'tool-logs']
     }
   },
   {
@@ -320,11 +285,8 @@ const routes = [
     component: () => import(/* webpackChunkName: "views/tools/log" */ '@/views/tool/ToolLog'),
     props: true,
     meta: {
-      breadcrumb: [
-        { name: 'tool-list', trad: 'tools' },
-        { name: 'tool-logs', trad: 'logs' },
-        { name: 'tool-log', param: 'name' }
-      ]
+      args: { param: 'name' },
+      breadcrumb: ['tool-list', 'tool-logs', 'tool-log']
     }
   },
   {
@@ -332,10 +294,8 @@ const routes = [
     path: '/tools/migrations',
     component: () => import(/* webpackChunkName: "views/tools/migrations" */ '@/views/tool/ToolMigrations'),
     meta: {
-      breadcrumb: [
-        { name: 'tool-list', trad: 'tools' },
-        { name: 'tool-migrations', trad: 'migrations' }
-      ]
+      args: { trad: 'migrations' },
+      breadcrumb: ['tool-list', 'tool-migrations']
     }
   },
   {
@@ -343,10 +303,8 @@ const routes = [
     path: '/tools/firewall',
     component: () => import(/* webpackChunkName: "views/tools/firewall" */ '@/views/tool/ToolFirewall'),
     meta: {
-      breadcrumb: [
-        { name: 'tool-list', trad: 'tools' },
-        { name: 'tool-firewall', trad: 'firewall' }
-      ]
+      args: { trad: 'firewall' },
+      breadcrumb: ['tool-list', 'tool-firewall']
     }
   },
   {
@@ -354,10 +312,8 @@ const routes = [
     path: '/tools/adminpw',
     component: () => import(/* webpackChunkName: "views/tools/adminpw" */ '@/views/tool/ToolAdminpw'),
     meta: {
-      breadcrumb: [
-        { name: 'tool-list', trad: 'tools' },
-        { name: 'tool-adminpw', trad: 'tools_adminpw' }
-      ]
+      args: { trad: 'tools_adminpw' },
+      breadcrumb: ['tool-list', 'tool-adminpw']
     }
   },
   {
@@ -365,10 +321,8 @@ const routes = [
     path: '/tools/webadmin',
     component: () => import(/* webpackChunkName: "views/tools/webadmin" */ '@/views/tool/ToolWebadmin'),
     meta: {
-      breadcrumb: [
-        { name: 'tool-list', trad: 'tools' },
-        { name: 'tool-webadmin', trad: 'tools_webadmin_settings' }
-      ]
+      args: { trad: 'tools_webadmin_settings' },
+      breadcrumb: ['tool-list', 'tool-webadmin']
     }
   },
   {
@@ -376,10 +330,8 @@ const routes = [
     path: '/tools/power',
     component: () => import(/* webpackChunkName: "views/tools/power" */ '@/views/tool/ToolPower'),
     meta: {
-      breadcrumb: [
-        { name: 'tool-list', trad: 'tools' },
-        { name: 'tool-power', trad: 'tools_shutdown_reboot' }
-      ]
+      args: { trad: 'tools_shutdown_reboot' },
+      breadcrumb: ['tool-list', 'tool-power']
     }
   },
 
@@ -391,9 +343,8 @@ const routes = [
     path: '/diagnosis',
     component: () => import(/* webpackChunkName: "views/diagnosis" */ '@/views/diagnosis/Diagnosis'),
     meta: {
-      breadcrumb: [
-        { name: 'diagnosis', trad: 'diagnosis' }
-      ]
+      args: { trad: 'diagnosis' },
+      breadcrumb: ['diagnosis']
     }
   },
 
@@ -405,9 +356,8 @@ const routes = [
     path: '/backup',
     component: () => import(/* webpackChunkName: "views/backup/backup" */ '@/views/backup/Backup'),
     meta: {
-      breadcrumb: [
-        { name: 'backup', trad: 'backup' }
-      ]
+      args: { trad: 'backup' },
+      breadcrumb: ['backup']
     }
   },
   {
@@ -416,10 +366,8 @@ const routes = [
     component: () => import(/* webpackChunkName: "views/backup/list" */ '@/views/backup/BackupList'),
     props: true,
     meta: {
-      breadcrumb: [
-        { name: 'backup', trad: 'backup' },
-        { name: 'backup-list', param: 'id' }
-      ]
+      args: { param: 'id' },
+      breadcrumb: ['backup', 'backup-list']
     }
   },
   {
@@ -428,11 +376,8 @@ const routes = [
     component: () => import(/* webpackChunkName: "views/backup/info" */ '@/views/backup/BackupInfo'),
     props: true,
     meta: {
-      breadcrumb: [
-        { name: 'backup', trad: 'backup' },
-        { name: 'backup-list', param: 'id' },
-        { name: 'backup-info', param: 'name' }
-      ]
+      args: { param: 'name' },
+      breadcrumb: ['backup', 'backup-list', 'backup-info']
     }
   },
   {
@@ -441,11 +386,8 @@ const routes = [
     component: () => import(/* webpackChunkName: "views/backup/create" */ '@/views/backup/BackupCreate'),
     props: true,
     meta: {
-      breadcrumb: [
-        { name: 'backup', trad: 'backup' },
-        { name: 'backup-list', param: 'id' },
-        { name: 'backup-create', trad: 'backup_create' }
-      ]
+      args: { trad: 'backup_create' },
+      breadcrumb: ['backup', 'backup-list', 'backup-create']
     }
   }
 ]