Breadcrumbs in elements?

Elements
1

Is there a breadcrumb feature in elements?

Is it an active dynamic feature (you can click on the preceding level in the breadcrumb and it takes you back there) or just an indicator of where you are?

2 Likes
2

Currently it is not a feature in elements, but it is planned under Feature Requests. https://elements.nolt.io/4

3

Use custom HTML Element

Template

<nav aria-label="Breadcrumb" id="breadcrumb"></nav>

Javascript

function createBreadcrumbFromPath() {
  const nav = document.getElementById('breadcrumb');
  if (!nav) return;
  nav.innerHTML = "";

  const path = window.location.pathname;
  const parts = path.split('/').filter(part => part.length > 0);

  const ol = document.createElement('ol');
  ol.style.display = 'flex';
  ol.style.listStyle = 'none';
  ol.style.gap = '0.5rem';
  ol.style.padding = '0';
  ol.style.margin = '0';

  let link = "/";
  const liHome = document.createElement('li');
  const aHome = document.createElement('a');
  aHome.href = "/";
  aHome.textContent = "Home";
  aHome.style.textDecoration = 'none';
  aHome.style.color = '#1976d2';
  liHome.appendChild(aHome);

  if (parts.length > 0) {
    const separator = document.createElement('span');
    separator.textContent = " › ";
    liHome.appendChild(separator);
  }
  ol.appendChild(liHome);

  parts.forEach((part, idx) => {
    link += (link.endsWith("/") ? "" : "/") + part;

    const li = document.createElement('li');
    if (idx < parts.length - 1) {
      const a = document.createElement('a');
      a.href = link;
      a.textContent = part.replace(/-/g, " ").replace(/^./, m => m.toUpperCase());
      a.style.textDecoration = 'none';
      a.style.color = '#1976d2';
      li.appendChild(a);

      const separator = document.createElement('span');
      separator.textContent = " › ";
      li.appendChild(separator);
    } else {
      li.textContent = part.replace(/-/g, " ").replace(/^./, m => m.toUpperCase());
      li.style.fontWeight = 'bold';
    }
    ol.appendChild(li);
  });

  nav.appendChild(ol);
}

document.addEventListener('DOMContentLoaded', createBreadcrumbFromPath);
1 Like
4

thank you will try that