diff --git a/ui/app/routes/clients.js b/ui/app/routes/clients.js
index 49559c8c9..b31c96990 100644
--- a/ui/app/routes/clients.js
+++ b/ui/app/routes/clients.js
@@ -8,6 +8,13 @@ export default Route.extend(WithForbiddenState, {
   store: service(),
   system: service(),
 
+  breadcrumbs: [
+    {
+      label: 'Clients',
+      args: ['clients.index'],
+    },
+  ],
+
   beforeModel() {
     return this.get('system.leader');
   },
diff --git a/ui/app/routes/clients/client.js b/ui/app/routes/clients/client.js
index f049d1efe..9e2493030 100644
--- a/ui/app/routes/clients/client.js
+++ b/ui/app/routes/clients/client.js
@@ -12,6 +12,16 @@ export default Route.extend(WithWatchers, {
     return this._super(...arguments).catch(notifyError(this));
   },
 
+  breadcrumbs(model) {
+    if (!model) return [];
+    return [
+      {
+        label: model.get('shortId'),
+        args: ['clients.client', model.get('id')],
+      },
+    ];
+  },
+
   afterModel(model) {
     if (model && model.get('isPartial')) {
       return model.reload().then(node => node.get('allocations'));
diff --git a/ui/app/routes/servers.js b/ui/app/routes/servers.js
index 49559c8c9..8f69d7b14 100644
--- a/ui/app/routes/servers.js
+++ b/ui/app/routes/servers.js
@@ -8,6 +8,13 @@ export default Route.extend(WithForbiddenState, {
   store: service(),
   system: service(),
 
+  breadcrumbs: [
+    {
+      label: 'Servers',
+      args: ['servers.index'],
+    },
+  ],
+
   beforeModel() {
     return this.get('system.leader');
   },
diff --git a/ui/app/templates/clients/client.hbs b/ui/app/templates/clients/client.hbs
index af3d918fa..05b44e757 100644
--- a/ui/app/templates/clients/client.hbs
+++ b/ui/app/templates/clients/client.hbs
@@ -1,10 +1,5 @@
 {{#global-header class="page-header"}}
-  <li>
-    {{#link-to "clients.index" data-test-breadcrumb="clients"}}Clients{{/link-to}}
-  </li>
-  <li class="is-active">
-    {{#link-to "clients.client" model.id data-test-breadcrumb="client"}}{{model.shortId}}{{/link-to}}
-  </li>
+  {{app-breadcrumbs}}
 {{/global-header}}
 {{#gutter-menu class="page-body"}}
   <section class="section">
diff --git a/ui/app/templates/clients/index.hbs b/ui/app/templates/clients/index.hbs
index 83ccc3796..1ff87db6a 100644
--- a/ui/app/templates/clients/index.hbs
+++ b/ui/app/templates/clients/index.hbs
@@ -1,7 +1,5 @@
 {{#global-header class="page-header"}}
-  <li class="is-active">
-    {{#link-to "clients.index"}}Clients{{/link-to}}
-  </li>
+  {{app-breadcrumbs}}
 {{/global-header}}
 {{#gutter-menu class="page-body"}}
   <section class="section">
diff --git a/ui/app/templates/servers.hbs b/ui/app/templates/servers.hbs
index 6a639191d..a2bdbc84d 100644
--- a/ui/app/templates/servers.hbs
+++ b/ui/app/templates/servers.hbs
@@ -1,8 +1,6 @@
 <div class="page-layout">
   {{#global-header class="page-header"}}
-    <li class="is-active">
-      {{#link-to "servers.index"}}Servers{{/link-to}}
-    </li>
+    {{app-breadcrumbs}}
   {{/global-header}}
   {{#gutter-menu class="page-body"}}
     <section class="section">