Kruimelpad dat meegroeit Nieuw

<!-- Kruimelpad dat meegroeit · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="bct"><nav class="bct__trail" aria-label="Kruimelpad"></nav><div class="bct__body"><span class="bct__kk"></span><h4 class="bct__h"></h4><ul class="bct__ul"></ul><p class="bct__leaf"></p></div></div>
</div>

/* Kruimelpad dat meegroeit · NedDev · eigen werk. */
.bct{position:absolute;inset:0;background:#fff;color:#0a0a0a;font-family:'Switzer',system-ui,sans-serif;display:flex;flex-direction:column;overflow:hidden;container-type:inline-size}
.bct__trail{display:flex;align-items:center;flex-wrap:nowrap;gap:0;padding:10px 14px;border-bottom:1px solid #e6e3de;background:#f4f3f1;min-height:38px;overflow:hidden;white-space:nowrap}
.bct__c{appearance:none;border:0;background:none;padding:3px 5px;border-radius:4px;font:500 12px 'Switzer',sans-serif;color:#6b6762;cursor:pointer;white-space:nowrap;transition:color .2s,background .2s}
.bct__c:hover{color:#0a0a0a;background:#fff}.bct__c:focus-visible{outline:2px solid #F5480F;outline-offset:1px}
.bct__c.is-last{color:#0a0a0a;font-weight:700;cursor:default}
.bct__c.is-dots{font-family:'JetBrains Mono',monospace;letter-spacing:.05em}
.bct__s{color:#c4bfb8;font-size:11px;margin:0 1px;display:inline-block}
.bct__new{animation:bct-in .42s cubic-bezier(.2,.8,.2,1) both}
.bct__s.bct__new{animation:bct-sep .3s ease both}
@keyframes bct-in{from{opacity:0;transform:translateX(10px);clip-path:inset(0 100% 0 0)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}
@keyframes bct-sep{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
.bct__gone{transition:opacity .2s,transform .2s;opacity:0;transform:translateX(8px)}
.bct__body{flex:1;padding:12px 14px;min-height:0}
.bct__body.is-fwd{animation:bct-f .38s cubic-bezier(.2,.8,.2,1) both}.bct__body.is-back{animation:bct-b .38s cubic-bezier(.2,.8,.2,1) both}
@keyframes bct-f{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}@keyframes bct-b{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
.bct__kk{font:500 9.5px 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:#F5480F}
.bct__h{margin:3px 0 8px;font:700 20px/1.1 'Switzer',sans-serif;letter-spacing:-.03em}
.bct__ul{list-style:none;margin:0;padding:0}
.bct__ul button{appearance:none;width:100%;display:flex;justify-content:space-between;align-items:center;border:0;border-top:1px solid #eeebe7;background:none;padding:7px 2px;font:500 13px 'Switzer',sans-serif;color:#0a0a0a;cursor:pointer;text-align:left;transition:padding .2s,color .2s}
.bct__ul li:last-child button{border-bottom:1px solid #eeebe7}
.bct__ul button:hover,.bct__ul button:focus-visible{padding-left:8px;color:#F5480F;outline:none}
.bct__ul button span{font:500 10px 'JetBrains Mono',monospace;color:#9a958f}
.bct__leaf{margin:0;font-size:12.5px;line-height:1.5;color:#4b4843;max-width:32em}
@container (max-width:380px){.bct__body{padding:9px 12px}.bct__h{font-size:17px;margin:2px 0 5px}.bct__ul button{padding:5px 2px;font-size:12.5px}}
@media (prefers-reduced-motion:reduce){.bct__new,.bct__body.is-fwd,.bct__body.is-back{animation:none}.bct__gone{transition:none}}

// Kruimelpad dat meegroeit · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.bct')||root;
var T={'Home':['Diensten','Projecten','Contact'],'Diensten':['Verbouw','Onderhoud','Verduurzaming'],'Verbouw':['Badkamer','Keuken','Zolder'],'Badkamer':['Inloopdouche','Toilet','Vloerverwarming']};
var L={'Inloopdouche':'Inloopdouche met glazen wand en goot, compleet getegeld. Vanaf € 4.250, klaar in 3 werkdagen.','Toilet':'Hangtoilet met inbouwreservoir en fonteintje. Vanaf € 1.890, klaar in 2 werkdagen.','Vloerverwarming':'Elektrische matten onder de tegels, eigen thermostaat. Vanaf € 65 per m2.'};
var trail=root.querySelector('.bct__trail'),body=root.querySelector('.bct__body'),kk=root.querySelector('.bct__kk'),h=root.querySelector('.bct__h'),ul=root.querySelector('.bct__ul'),leaf=root.querySelector('.bct__leaf');
var path=['Home'],expanded=false,auto=!matchMedia('(prefers-reduced-motion: reduce)').matches,timer=0;
function narrow(){return root.clientWidth<380;}
function crumbs(isNew){trail.innerHTML='';var n=path.length,lim=narrow()?3:4,show=path.map(function(_,i){return i;});
if(n>lim&&!expanded)show=[0,-1].concat(show.slice(n-(lim-2)));
show.forEach(function(i,k){if(k>0){var s=document.createElement('span');s.className='bct__s'+(isNew&&k===show.length-1?' bct__new':'');s.textContent='/';s.setAttribute('aria-hidden','true');trail.appendChild(s);}
var b=document.createElement('button');b.type='button';b.className='bct__c';
if(i===-1){b.textContent='...';b.className+=' is-dots';b.setAttribute('aria-label','Toon volledig pad');b.addEventListener('click',function(){auto=false;expanded=true;crumbs(false);});}
else{b.textContent=path[i];if(i===n-1){b.className+=' is-last';b.setAttribute('aria-current','page');if(isNew)b.className+=' bct__new';}else b.addEventListener('click',function(){auto=false;up(i);});}
trail.appendChild(b);});}
function page(dir){var cur=path[path.length-1],kids=T[cur]||[];kk.textContent='Niveau '+path.length;h.textContent=cur;ul.innerHTML='';leaf.textContent=kids.length?'':(L[cur]||'');
kids.forEach(function(k){var li=document.createElement('li'),b=document.createElement('button');b.type='button';b.innerHTML=k+' <span>'+(T[k]?T[k].length+' onderdelen':'bekijk')+'</span>';b.addEventListener('click',function(){auto=false;down(k);});li.appendChild(b);ul.appendChild(li);});
body.classList.remove('is-fwd','is-back');void body.offsetWidth;if(dir)body.classList.add(dir);}
function down(k){path.push(k);expanded=false;crumbs(true);page('is-fwd');}
function up(i){var gone=[].slice.call(trail.children).slice(-(path.length-1-i)*2);gone.forEach(function(g){g.classList.add('bct__gone');});
setTimeout(function(){path=path.slice(0,i+1);expanded=false;crumbs(false);page('is-back');},200);}
crumbs(false);page(null);
(function loop(){timer=setTimeout(function(){if(!auto)return;var cur=path[path.length-1],kids=T[cur];
var next={'Home':'Diensten','Diensten':'Verbouw','Verbouw':'Badkamer','Badkamer':'Inloopdouche'}[cur];
if(next&&kids)down(next);else up(0);loop();},next0());})();
function next0(){return path[path.length-1]==='Inloopdouche'?2600:1300;}
}
init(document.querySelector('.jouw-container'));