Kruimelpad dat op mobiel een terugknop wordt New
Breadcrumb for a shop with deep categories. When the full trail no longer fits it becomes a link back to the parent category with a button next to it that expands the whole trail as a list. A ResizeObserver measures whether the trail fits, so it reacts to the real space instead of a fixed breakpoint. The Wide and Narrow buttons show both states. Without JS the normal trail stays and wraps onto a new line.
Wandtegel mat wit 30 x 60 cm
€ 34,95 per m², op voorraad in Rijswijk. Morgen in huis bij bestelling voor 16:00.
How to use it
- Paste the HTML where the navigation & menus should appear.
- Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
- Add the JavaScript and call init() with the element that contains the HTML.
<!-- Kruimelpad dat op mobiel een terugknop wordt · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="kst">
<div class="kst__ctl" role="group" aria-label="Voorbeeldbreedte"><button class="kst__w" type="button" aria-pressed="true" data-w="100%">Breed</button><button class="kst__w" type="button" aria-pressed="false" data-w="250px">Smal</button></div>
<div class="kst__frame">
<nav class="kst__nav" aria-label="Kruimelpad">
<ol class="kst__full">
<li><a href="#kst-home">Home</a></li>
<li><a href="#kst-klussen">Badkamer</a></li>
<li><a href="#kst-tegels">Tegels</a></li>
<li><a href="#kst-wand">Wandtegels</a></li>
<li><span aria-current="page">Mat wit 30 x 60</span></li>
</ol>
<div class="kst__short">
<a class="kst__back" href="#kst-wand"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M10 3L5 8l5 5"/></svg><span>Wandtegels</span></a>
<button class="kst__more" type="button" aria-expanded="false" aria-controls="kst-pad" aria-label="Volledig pad tonen"><svg viewBox="0 0 16 16" aria-hidden="true"><circle cx="3.5" cy="8" r="1.3"/><circle cx="8" cy="8" r="1.3"/><circle cx="12.5" cy="8" r="1.3"/></svg></button>
<ol class="kst__pad" id="kst-pad" hidden></ol>
</div>
</nav>
<h3 class="kst__h">Wandtegel mat wit 30 x 60 cm</h3>
<p class="kst__p">€ 34,95 per m², op voorraad in Rijswijk. Morgen in huis bij bestelling voor 16:00.</p>
</div>
</div>
</div>/* Kruimelpad dat op mobiel een terugknop wordt · NedDev · eigen werk. */
.kst{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:12px 14px;background:#f4f3f1;color:#0a0a0a;font-family:'Switzer',sans-serif;text-align:left;overflow:hidden}
.kst *,.kst *::before,.kst *::after{box-sizing:border-box}
.kst__ctl{display:flex;border:1px solid #0a0a0a;border-radius:4px;overflow:hidden}
.kst__w{min-height:28px;padding:5px 12px;margin:0;border:0;background:#fff;color:#0a0a0a;font:500 13px/1 'Switzer',sans-serif;cursor:pointer}
.kst__w+.kst__w{border-left:1px solid #0a0a0a}
.kst__w[aria-pressed="true"]{background:#0a0a0a;color:#fff}
.kst__w:focus-visible{outline:2px solid #F5480F;outline-offset:-2px}
.kst__frame{position:relative;width:100%;max-width:100%;flex:1;min-height:0;padding:12px 14px;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:8px;transition:width .35s cubic-bezier(.3,.7,.2,1)}
.kst__nav{position:relative;z-index:2;min-height:28px}
.kst__full{display:flex;flex-wrap:wrap;align-items:center;margin:0;padding:0;list-style:none;font:400 13px/1.2 'Switzer',sans-serif;color:#57534e}
.kst.is-measure .kst__full{flex-wrap:nowrap;width:max-content}
.kst__full li{display:flex;align-items:center;white-space:nowrap}
.kst__full li+li::before{content:'/';margin:0 6px;color:#bdb8b0}
.kst__full a{display:inline-flex;align-items:center;min-height:26px;color:#3a3733;text-decoration:underline;text-decoration-color:rgba(10,10,10,.25);text-underline-offset:3px}
.kst__full a:hover{color:#0a0a0a;text-decoration-color:#F5480F}
.kst__full [aria-current]{color:#0a0a0a;font-weight:600}
.kst__short{display:none;align-items:center;gap:6px}
.kst.is-short .kst__full{display:none}
.kst.is-short .kst__short{display:flex;animation:kstIn .2s ease}
@keyframes kstIn{from{opacity:0;transform:translateX(6px)}to{opacity:1;transform:none}}
.kst__back{display:inline-flex;align-items:center;gap:4px;min-height:28px;padding:0 8px 0 4px;margin-left:-4px;border-radius:4px;color:#0a0a0a;text-decoration:none;font:600 13px/1 'Switzer',sans-serif}
.kst__back:hover{background:#f4f3f1}
.kst__back svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kst__more{display:grid;place-items:center;width:28px;height:28px;margin:0;padding:0;border:1px solid rgba(10,10,10,.25);border-radius:4px;background:#fff;color:#0a0a0a;cursor:pointer}
.kst__more svg{width:14px;height:14px;fill:currentColor}
.kst__more[aria-expanded="true"]{background:#0a0a0a;color:#fff;border-color:#0a0a0a}
.kst a:focus-visible,.kst__more:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.kst__pad{position:absolute;left:0;top:calc(100% + 4px);min-width:190px;margin:0;padding:4px;list-style:none;background:#fff;border:1px solid rgba(10,10,10,.14);border-radius:8px;box-shadow:0 14px 30px -12px rgba(10,10,10,.35)}
.kst__pad[hidden]{display:none}
.kst__pad a,.kst__pad span{display:flex;align-items:center;min-height:28px;padding:4px 8px;padding-left:calc(8px + var(--lv,0) * 10px);border-radius:4px;color:#0a0a0a;text-decoration:none;font:400 13px/1.2 'Switzer',sans-serif}
.kst__pad a:hover,.kst__pad a:focus{background:#f4f3f1;outline:none}
.kst__pad a:focus-visible{box-shadow:inset 0 0 0 2px #F5480F}
.kst__pad span{font-weight:600}
.kst__h{margin:8px 0 4px;font:600 18px/1.2 'Switzer',sans-serif;letter-spacing:-.015em;text-wrap:balance}
.kst__p{margin:0;font:400 13px/1.45 'Switzer',sans-serif;color:#3a3733}
@media (prefers-reduced-motion:reduce){.kst__frame{transition:none}.kst.is-short .kst__short{animation:none}}// Kruimelpad dat op mobiel een terugknop wordt · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.kst');if(!w)return;
var frame=w.querySelector('.kst__frame'),nav=w.querySelector('.kst__nav'),full=w.querySelector('.kst__full'),more=w.querySelector('.kst__more'),pad=w.querySelector('.kst__pad');
pad.innerHTML=[].map.call(full.children,function(li,i){var c=li.firstElementChild.cloneNode(true);c.style.setProperty('--lv',i);var o=document.createElement('li');o.appendChild(c);return o.outerHTML;}).join('');
function closeP(back){if(pad.hidden)return;pad.hidden=true;more.setAttribute('aria-expanded','false');if(back)more.focus();}
function fit(){w.classList.add('is-measure');w.classList.remove('is-short');var need=full.scrollWidth,room=nav.clientWidth;w.classList.remove('is-measure');var s=need>room;w.classList.toggle('is-short',s);if(!s)closeP(false);}
if('ResizeObserver' in window)new ResizeObserver(fit).observe(nav);fit();
[].forEach.call(w.querySelectorAll('.kst__w'),function(b){b.addEventListener('click',function(){[].forEach.call(w.querySelectorAll('.kst__w'),function(o){o.setAttribute('aria-pressed',o===b?'true':'false');});frame.style.width=b.dataset.w;});});
more.addEventListener('click',function(){if(pad.hidden){pad.hidden=false;more.setAttribute('aria-expanded','true');pad.querySelector('a').focus();}else closeP(true);});
pad.addEventListener('keydown',function(e){var ls=[].slice.call(pad.querySelectorAll('a')),i=ls.indexOf(document.activeElement);if(e.key==='ArrowDown'){e.preventDefault();(ls[i+1]||ls[0]).focus();}else if(e.key==='ArrowUp'){e.preventDefault();(ls[i-1]||ls[ls.length-1]).focus();}else if(e.key==='Escape'){e.preventDefault();closeP(true);}});
pad.addEventListener('focusout',function(e){if(!nav.contains(e.relatedTarget))closeP(false);});
w.addEventListener('click',function(e){var a=e.target.closest('a');if(a)e.preventDefault();});
document.addEventListener('pointerdown',function(e){if(!pad.hidden&&!nav.contains(e.target))closeP(false);});
}
init(document.querySelector('.jouw-container'));More navigation & menus
Seen something you like?
Add it to your selection and send it over. We build your site around it, in your brand.
Get in touch →