33 lines
1.1 KiB
JavaScript
33 lines
1.1 KiB
JavaScript
/** Renders a `/`-separated path as clickable breadcrumb segments into `container`. */
|
|
export function renderBreadcrumbs(container, path, onNavigate) {
|
|
container.innerHTML = "";
|
|
const parts = path.split("/").filter(Boolean);
|
|
|
|
const root = document.createElement("button");
|
|
root.type = "button";
|
|
root.className = "breadcrumb-seg";
|
|
root.textContent = "/";
|
|
root.addEventListener("click", () => onNavigate("/"));
|
|
container.appendChild(root);
|
|
|
|
let acc = "";
|
|
parts.forEach((part, i) => {
|
|
acc += `/${part}`;
|
|
const isLast = i === parts.length - 1;
|
|
const seg = document.createElement(isLast ? "span" : "button");
|
|
seg.className = `breadcrumb-seg ${isLast ? "current" : ""}`;
|
|
seg.textContent = part;
|
|
if (!isLast) {
|
|
const target = acc;
|
|
seg.type = "button";
|
|
seg.addEventListener("click", () => onNavigate(target));
|
|
}
|
|
container.appendChild(seg);
|
|
if (!isLast) {
|
|
const sep = document.createElement("span");
|
|
sep.className = "breadcrumb-sep";
|
|
sep.textContent = "/";
|
|
container.appendChild(sep);
|
|
}
|
|
});
|
|
}
|