packages/sshecret-admin/src/sshecret_admin/frontend/templates/base/page.html.j2

@@ -7,7 +7,7 @@
   <div class="p-4 bg-white block sm:flex items-center justify-between border-b border-gray-200">
     <nav class="text-sm text-gray-500" aria-label="Breadcrumb">
 
-      <sl-breadcrumb>
+      <sl-breadcrumb id="breadcrumbs">
         <sl-breadcrumb-item>
           <sl-icon slot="prefix" name="house"></sl-icon>
           <a href="/">Home</a>

packages/sshecret-admin/src/sshecret_admin/frontend/templates/clients/partials/tree_event.js

@@ -1,3 +1,16 @@
+function setBreadcrumb(name) {
+  // Set the current client name as the final breadcrumb
+  const breadcrumbs = document.getElementById("breadcrumbs");
+  const existingNode = document.getElementById("bc-dynamic-client");
+  if (existingNode) {
+    breadcrumbs.removeChild(existingNode);
+  }
+  const newCrumb = document.createElement("sl-breadcrumb-item");
+  newCrumb.setAttribute("id", "bc-dynamic-client");
+  const bcTitle = document.createTextNode(name);
+  newCrumb.appendChild(bcTitle);
+  breadcrumbs.appendChild(newCrumb);
+}
 function addTreeListener() {
   const tree = document.querySelector("sl-tree");
 
@@ -28,6 +41,7 @@ function addTreeListener() {
         .then(() => {
           masterPane.classList.add("hidden");
           detailPane.classList.remove("hidden");
+          setBreadcrumb(name);
         });
     }
   });