{# Plugins/NextCloud/View/Nextcloud/breadcrumbs.html.twig #}
<nav aria-label="breadcrumb" class="mb-3"
     x-data="{
      items: breadcrumbs || [],
      visible() {
        const n = this.items.length;
        if (n <= 4) return this.items;
        // Muestra: primero, ellipsis, últimos 2, y el actual.
        return [this.items[0], { label: '…', isEllipsis: true }, ...this.items.slice(n - 3)];
      }
     }">
  <ol class="breadcrumb mb-0 align-items-center"
      itemscope itemtype="https://schema.org/BreadcrumbList">
    <template x-for="(crumb, i) in visible()" :key="i">
      <li class="breadcrumb-item d-flex align-items-center"
          :class="{
            'active': !crumb.isEllipsis && (crumb === items[items.length - 1]),
            'text-muted': crumb.isEllipsis
          }"
          aria-current="page"
          itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">

        <!-- Ellipsis (colapso) -->
        <template x-if="crumb.isEllipsis">
          <span class="px-1" aria-hidden="true">…</span>
        </template>

        <!-- Último (activo) -->
        <template x-if="!crumb.isEllipsis && (crumb === items[items.length - 1])">
          <span class="d-inline-block text-truncate" style="max-width:18ch"
                x-text="crumb.label"
                :title="crumb.label"
                itemprop="name"></span>
        </template>

        <!-- Enlaces intermedios -->
        <template x-if="!crumb.isEllipsis && (crumb !== items[items.length - 1])">
          <a class="d-inline-flex align-items-center gap-1 text-decoration-none"
             :href="crumb.href"
             :title="crumb.label"
             itemprop="item">
            <!-- opcional: icono para 'home' si es el primero -->
            <template x-if="i === 0">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                   viewBox="0 0 24 24" fill="currentColor" class="opacity-75">
                <path d="M12 3l9 8h-3v9h-5v-6H11v6H6v-9H3l9-8z"/>
              </svg>
            </template>
            <span class="d-inline-block text-truncate" style="max-width:18ch"
                  x-text="crumb.label" itemprop="name"></span>
          </a>
        </template>

        <!-- Posición (SEO) -->
        <meta itemprop="position" :content="i + 1">
      </li>
    </template>
  </ol>
</nav>

{# estilos finos; muévelos a tu CSS si prefieres #}
<style>
  /* Separador más limpio: › */
  .breadcrumb { --bs-breadcrumb-divider: '›'; }
  /* Mejora contraste en dark si usas .bg-dark */
  .bg-dark .breadcrumb .breadcrumb-item a { color: rgba(255,255,255,.85); }
  .bg-dark .breadcrumb .breadcrumb-item.active { color: rgba(255,255,255,.65); }
  /* Hover sutil */
  .breadcrumb .breadcrumb-item a:hover { text-decoration: underline; }
</style>