Folder Morph Breadcrumb

<nav aria-label="Breadcrumb" class="nuda-bc2-folder">
  <ol class="nuda-bc2-folder__list">
    <li class="nuda-bc2-folder__item">
      <svg class="nuda-bc2-folder__icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 6a1 1 0 0 1 1-1h5l2 2h9a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6z"></path></svg>
      <a class="nuda-bc2-folder__link" href="#">root</a>
    </li>
    <li class="nuda-bc2-folder__sep" aria-hidden="true">/</li>
    <li class="nuda-bc2-folder__item">
      <svg class="nuda-bc2-folder__icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 6a1 1 0 0 1 1-1h5l2 2h9a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6z"></path></svg>
      <a class="nuda-bc2-folder__link" href="#">assets</a>
    </li>
    <li class="nuda-bc2-folder__sep" aria-hidden="true">/</li>
    <li class="nuda-bc2-folder__item nuda-bc2-folder__item--cur">
      <span class="nuda-bc2-folder__iconwrap" aria-hidden="true">
        <svg class="nuda-bc2-folder__icon nuda-bc2-folder__icon--closed" viewBox="0 0 24 24" fill="currentColor"><path d="M3 6a1 1 0 0 1 1-1h5l2 2h9a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6z"></path></svg>
        <svg class="nuda-bc2-folder__icon nuda-bc2-folder__icon--open" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M3 8a1 1 0 0 1 1-1h4l2 2h9a1 1 0 0 1 .97 1.24l-1.4 6A1 1 0 0 1 17.6 18H5a1 1 0 0 1-1-1V8z"></path><path d="M3 8V6a1 1 0 0 1 1-1h4l2 2"></path></svg>
      </span>
      <span class="nuda-bc2-folder__link nuda-bc2-folder__link--cur" aria-current="page">icons</span>
    </li>
  </ol>
</nav>

.nuda-bc2-folder {
  width: 260px;
}

.nuda-bc2-folder__list {
  display: flex;
  align-items: center;
  gap: .35rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .78rem;
}

.nuda-bc2-folder__item {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: #999;
}

.nuda-bc2-folder__icon {
  width: 14px;
  height: 14px;
  color: #777;
  flex: none;
}

.nuda-bc2-folder__link {
  color: #999;
  text-decoration: none;
}

.nuda-bc2-folder__link:hover {
  color: #e4ff54;
}

.nuda-bc2-folder__sep {
  color: #444;
}

.nuda-bc2-folder__link--cur {
  color: #e4ff54;
  font-weight: 600;
}

.nuda-bc2-folder__iconwrap {
  position: relative;
  width: 14px;
  height: 14px;
  flex: none;
  display: inline-block;
}

.nuda-bc2-folder__iconwrap .nuda-bc2-folder__icon {
  position: absolute;
  inset: 0;
}

.nuda-bc2-folder__icon--closed {
  color: #e4ff54;
  animation: nuda-bc2-folder-close .7s ease .2s both;
}

.nuda-bc2-folder__icon--open {
  color: #e4ff54;
  opacity: 0;
  transform: scale(.7);
  animation: nuda-bc2-folder-open .7s ease .2s both;
}

@keyframes nuda-bc2-folder-close {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  55% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(.7);
  }
}

@keyframes nuda-bc2-folder-open {
  0% {
    opacity: 0;
    transform: scale(.7);
  }
  55% {
    opacity: 0;
    transform: scale(.7);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-bc2-folder__icon--closed {
    animation: none !important;
    opacity: 0;
    transform: scale(.7);
  }
  .nuda-bc2-folder__icon--open {
    animation: none !important;
    opacity: 1;
    transform: scale(1);
  }
}