# Breadcrumbs in elements?

**URL:** <https://forums.realmacsoftware.com/t/breadcrumbs-in-elements/49420>\
**Category:** Elements\
**Created:** [August 3, 2025, 4:36am UTC](https://forums.realmacsoftware.com/t/breadcrumbs-in-elements/49420 "2025-08-03T04:36:48Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![WOS](https://avatars.discourse-cdn.com/v4/letter/w/8e7dd6/32.png) [@WOS](https://forums.realmacsoftware.com/u/WOS)\
**Post date:** [August 3, 2025, 4:36am UTC](https://forums.realmacsoftware.com/t/breadcrumbs-in-elements/49420/1 "2025-08-03T04:36:48Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![ercross](https://avatars.discourse-cdn.com/v4/letter/e/c57346/32.png) [@ercross](https://forums.realmacsoftware.com/u/ercross)\
**Post date:** [August 5, 2025, 9:46am UTC](https://forums.realmacsoftware.com/t/breadcrumbs-in-elements/49420/2 "2025-08-05T09:46:23Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Ulrich](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ulrich/32/29764_2.png) [@Ulrich](https://forums.realmacsoftware.com/u/Ulrich)\
**Post date:** [August 5, 2025, 11:01am UTC](https://forums.realmacsoftware.com/t/breadcrumbs-in-elements/49420/3 "2025-08-05T11:01:45Z")

</div>

Use custom HTML Element

#### Template

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

#### Javascript

```auto
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);

```

---

<div class="post-metadata">

**Author:** ![WOS](https://avatars.discourse-cdn.com/v4/letter/w/8e7dd6/32.png) [@WOS](https://forums.realmacsoftware.com/u/WOS)\
**Post date:** [August 5, 2025, 3:45pm UTC](https://forums.realmacsoftware.com/t/breadcrumbs-in-elements/49420/4 "2025-08-05T15:45:56Z")

</div>

thank you will try that