Breadcrumb Drill-Down

<!-- Breadcrumb Drill-Down — sub-command navigation with a trail of chips -->
<div class="nuda-cp2-breadcrumb" role="dialog" aria-label="Command palette">
  <div class="nuda-cp2-breadcrumb__trail">
    <span class="nuda-cp2-breadcrumb__chip">Home</span>
    <svg class="nuda-cp2-breadcrumb__sep" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <path d="M9 6 L15 12 L9 18" />
    </svg>
    <span class="nuda-cp2-breadcrumb__chip nuda-cp2-breadcrumb__chip--active">Settings</span>
  </div>
  <ul class="nuda-cp2-breadcrumb__list" role="listbox" aria-label="Settings commands">
    <li class="nuda-cp2-breadcrumb__opt nuda-cp2-breadcrumb__opt--active" role="option" aria-selected="true">Change theme</li>
    <li class="nuda-cp2-breadcrumb__opt" role="option" aria-selected="false">Manage account</li>
    <li class="nuda-cp2-breadcrumb__opt" role="option" aria-selected="false">Notifications</li>
  </ul>
</div>

.nuda-cp2-breadcrumb {
  width: 290px;
  background: #161616;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  overflow: hidden;
  animation: nuda-cp2-breadcrumb-in .3s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 16px 40px -8px rgba(0,0,0,.6);
}

.nuda-cp2-breadcrumb__trail {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.nuda-cp2-breadcrumb__chip {
  font: 600 10px ui-sans-serif,system-ui;
  color: #777;
  padding: 3px 7px;
  border-radius: 5px;
  background: rgba(255,255,255,.04);
}

.nuda-cp2-breadcrumb__chip--active {
  color: #0a0a0a;
  background: #e4ff54;
  animation: nuda-cp2-breadcrumb-pop .35s cubic-bezier(.34,1.56,.64,1);
}

.nuda-cp2-breadcrumb__sep {
  width: 11px;
  height: 11px;
  color: #555;
  flex-shrink: 0;
}

.nuda-cp2-breadcrumb__list {
  list-style: none;
  margin: 0;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.nuda-cp2-breadcrumb__opt {
  padding: 7px 10px;
  font: 500 12px ui-sans-serif,system-ui;
  color: #cfcfcf;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s,color .15s;
}

.nuda-cp2-breadcrumb__opt:hover {
  background: rgba(255,255,255,.05);
  color: #fafafa;
}

.nuda-cp2-breadcrumb__opt--active {
  background: rgba(228,255,84,.1);
  color: #e4ff54;
}

@keyframes nuda-cp2-breadcrumb-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes nuda-cp2-breadcrumb-pop {
  0% {
    transform: scale(.7);
    opacity: 0;
  }
  70% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-cp2-breadcrumb,.nuda-cp2-breadcrumb__chip--active {
    animation: none !important;
  }
}