現在地マーカースライドパンくず

<div class="d03-14-03-bc">
          <button type="button" class="active" data-i="0">ホーム</button>
          <button type="button" data-i="1">カテゴリ</button>
          <button type="button" data-i="2">商品詳細</button>
          <span class="d03-14-03-marker"></span>
        </div>

.d03-14-03-bc{position:relative;display:inline-flex;gap:22px;padding-bottom:14px}
        .d03-14-03-bc button{
          border:none;background:none;cursor:pointer;font-family:inherit;
          font-size:13px;font-weight:600;color:#94a3b8;padding:4px 2px;transition:color .3s ease;
        }
        .d03-14-03-bc button.active{color:#2563eb}
        .d03-14-03-marker{
          position:absolute;bottom:0;left:0;width:8px;height:8px;border-radius:999px;
          background:#2563eb;box-shadow:0 0 0 4px #dbeafe;
          transition:left .4s cubic-bezier(.4,0,.2,1);
        }

(function(){
        var bc=document.querySelector('.d03-14-03-bc');
        if(!bc)return;
        var marker=bc.querySelector('.d03-14-03-marker');
        var btns=bc.querySelectorAll('button');
        function move(btn){
          marker.style.left=(btn.offsetLeft+btn.offsetWidth/2-4)+'px';
        }
        btns.forEach(function(b){
          b.addEventListener('click',function(){
            bc.querySelector('button.active').classList.remove('active');
            b.classList.add('active');
            move(b);
          });
        });
        function init(){move(bc.querySelector('button.active'))}
        if(document.readyState==='complete'){init()}
        else{window.addEventListener('load',init)}
      })();