Boomstructuur voor documenten New

Collapsible folder tree following the ARIA tree pattern, shown as the document folder in the client portal of an accountant. Up and down walk the visible rows, right expands or moves to the first child, left collapses or moves to the parent folder, Home and End jump to start and end, a letter finds the next row starting with it and * expands all folders on the same level. One row is in the tab order (roving tabindex). Use it for documents, product categories or a deep sitemap.

Documenten van Bakkerij Verbeek

Administratie 2026
- Kwartaal 3
  - Btw-aangifte Q3.pdf
  - Bankafschriften juli.pdf
- Inkoopfacturen
  - Meelhandel De Molen 2026-118.pdf
  - Energie september.pdf
- Kassaoverzicht september.xlsx
Jaarstukken 2025
- Jaarrekening 2025.pdf
- Aangifte vennootschapsbelasting.pdf
Loonadministratie
- Loonstroken september.pdf
- Contract Ilse de Wit.pdf

Kies een document met de pijltjes of klik erop.

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.

<!-- Boomstructuur voor documenten · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="bdt">
<p class="bdt__h" id="bdt-h">Documenten van Bakkerij Verbeek</p>
<ul class="bdt__tree" role="tree" aria-labelledby="bdt-h">
<li class="bdt__i" role="treeitem" aria-expanded="true"><span class="bdt__row"><svg class="bdt__chev" viewBox="0 0 16 16" aria-hidden="true"><path d="M6 4l4 4-4 4"/></svg><svg class="bdt__ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M2 4h4l1.5 1.5H14V13H2z"/></svg><span class="bdt__lab">Administratie 2026</span></span>
<ul class="bdt__g" role="group">
<li class="bdt__i" role="treeitem" aria-expanded="false"><span class="bdt__row"><svg class="bdt__chev" viewBox="0 0 16 16" aria-hidden="true"><path d="M6 4l4 4-4 4"/></svg><svg class="bdt__ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M2 4h4l1.5 1.5H14V13H2z"/></svg><span class="bdt__lab">Kwartaal 3</span></span>
<ul class="bdt__g" role="group">
<li class="bdt__i" role="treeitem"><span class="bdt__row"><svg class="bdt__ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 2h5l3 3v9H4z"/></svg><span class="bdt__lab">Btw-aangifte Q3.pdf</span></span></li>
<li class="bdt__i" role="treeitem"><span class="bdt__row"><svg class="bdt__ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 2h5l3 3v9H4z"/></svg><span class="bdt__lab">Bankafschriften juli.pdf</span></span></li>
</ul></li>
<li class="bdt__i" role="treeitem" aria-expanded="false"><span class="bdt__row"><svg class="bdt__chev" viewBox="0 0 16 16" aria-hidden="true"><path d="M6 4l4 4-4 4"/></svg><svg class="bdt__ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M2 4h4l1.5 1.5H14V13H2z"/></svg><span class="bdt__lab">Inkoopfacturen</span></span>
<ul class="bdt__g" role="group">
<li class="bdt__i" role="treeitem"><span class="bdt__row"><svg class="bdt__ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 2h5l3 3v9H4z"/></svg><span class="bdt__lab">Meelhandel De Molen 2026-118.pdf</span></span></li>
<li class="bdt__i" role="treeitem"><span class="bdt__row"><svg class="bdt__ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 2h5l3 3v9H4z"/></svg><span class="bdt__lab">Energie september.pdf</span></span></li>
</ul></li>
<li class="bdt__i" role="treeitem"><span class="bdt__row"><svg class="bdt__ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 2h5l3 3v9H4z"/></svg><span class="bdt__lab">Kassaoverzicht september.xlsx</span></span></li>
</ul></li>
<li class="bdt__i" role="treeitem" aria-expanded="false"><span class="bdt__row"><svg class="bdt__chev" viewBox="0 0 16 16" aria-hidden="true"><path d="M6 4l4 4-4 4"/></svg><svg class="bdt__ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M2 4h4l1.5 1.5H14V13H2z"/></svg><span class="bdt__lab">Jaarstukken 2025</span></span>
<ul class="bdt__g" role="group">
<li class="bdt__i" role="treeitem"><span class="bdt__row"><svg class="bdt__ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 2h5l3 3v9H4z"/></svg><span class="bdt__lab">Jaarrekening 2025.pdf</span></span></li>
<li class="bdt__i" role="treeitem"><span class="bdt__row"><svg class="bdt__ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 2h5l3 3v9H4z"/></svg><span class="bdt__lab">Aangifte vennootschapsbelasting.pdf</span></span></li>
</ul></li>
<li class="bdt__i" role="treeitem" aria-expanded="false"><span class="bdt__row"><svg class="bdt__chev" viewBox="0 0 16 16" aria-hidden="true"><path d="M6 4l4 4-4 4"/></svg><svg class="bdt__ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M2 4h4l1.5 1.5H14V13H2z"/></svg><span class="bdt__lab">Loonadministratie</span></span>
<ul class="bdt__g" role="group">
<li class="bdt__i" role="treeitem"><span class="bdt__row"><svg class="bdt__ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 2h5l3 3v9H4z"/></svg><span class="bdt__lab">Loonstroken september.pdf</span></span></li>
<li class="bdt__i" role="treeitem"><span class="bdt__row"><svg class="bdt__ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 2h5l3 3v9H4z"/></svg><span class="bdt__lab">Contract Ilse de Wit.pdf</span></span></li>
</ul></li>
</ul>
<p class="bdt__st" aria-live="polite">Kies een document met de pijltjes of klik erop.</p>
</div>
</div>

/* Boomstructuur voor documenten · NedDev · eigen werk. */
.bdt{position:absolute;inset:0;display:flex;flex-direction:column;background:#fff;color:#0a0a0a;font-family:'Switzer',sans-serif;text-align:left}
.bdt *,.bdt *::before,.bdt *::after{box-sizing:border-box}
.bdt__h{margin:0;padding:12px 14px 8px;font:600 15px/1.2 'Switzer',sans-serif;border-bottom:1px solid rgba(10,10,10,.1)}
.bdt__tree,.bdt__g{list-style:none;margin:0;padding:0}
.bdt__tree{flex:1;min-height:0;overflow:auto;padding:6px 6px 6px;scrollbar-width:thin}
.bdt__i{outline:none}
.bdt__row{--lv:0;display:flex;align-items:center;gap:6px;min-height:28px;padding:0 8px 0 calc(6px + var(--lv) * 18px);border-radius:4px;font:400 14px/1.2 'Switzer',sans-serif;cursor:pointer;user-select:none;white-space:nowrap}
.bdt__lab{overflow:hidden;text-overflow:ellipsis}
.bdt__row:hover{background:#f4f3f1}
.bdt__i:focus-visible>.bdt__row{box-shadow:inset 0 0 0 2px #F5480F}
.bdt__i[aria-selected="true"]>.bdt__row{background:#0a0a0a;color:#fff}
.bdt__chev,.bdt__ic{flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bdt__chev{transition:transform .18s ease}
.bdt__i:not([aria-expanded])>.bdt__row{padding-left:calc(26px + var(--lv) * 18px)}
.bdt__i[aria-expanded="true"]>.bdt__row .bdt__chev{transform:rotate(90deg)}
.bdt__i[aria-expanded="true"]>.bdt__row>.bdt__ic path{fill:#F5480F;stroke:#0a0a0a}
.bdt__i[aria-expanded="false"]>.bdt__g{display:none}
.bdt__i[aria-expanded="true"]>.bdt__g{animation:bdtOpen .2s ease}
@keyframes bdtOpen{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.bdt__st{margin:0;padding:8px 14px 10px;border-top:1px solid rgba(10,10,10,.1);font:400 13px/1.3 'Switzer',sans-serif;color:#57534e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (prefers-reduced-motion:reduce){.bdt__chev{transition:none}.bdt__i[aria-expanded="true"]>.bdt__g{animation:none}}

// Boomstructuur voor documenten · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.bdt');if(!w)return;
var tree=w.querySelector('.bdt__tree'),st=w.querySelector('.bdt__st');
var all=[].slice.call(w.querySelectorAll('.bdt__i'));
all.forEach(function(li){var lv=0,p=li.parentElement;while(p&&p!==tree){if(p.classList.contains('bdt__g'))lv++;p=p.parentElement;}
li.querySelector('.bdt__row').style.setProperty('--lv',lv);li.setAttribute('aria-label',li.querySelector('.bdt__lab').textContent);li.setAttribute('aria-level',lv+1);li.tabIndex=-1;});
all[0].tabIndex=0;
function lab(li){return li.querySelector('.bdt__lab').textContent;}
function visible(){return all.filter(function(li){var p=li.parentElement.closest('.bdt__i');while(p){if(p.getAttribute('aria-expanded')==='false')return false;p=p.parentElement.closest('.bdt__i');}return true;});}
function go(li){if(!li)return;all.forEach(function(o){o.tabIndex=-1;});li.tabIndex=0;li.focus();li.scrollIntoView({block:'nearest'});}
function isParent(li){return li.hasAttribute('aria-expanded');}
function toggle(li,open){if(!isParent(li))return;var o=open===undefined?li.getAttribute('aria-expanded')!=='true':open;li.setAttribute('aria-expanded',o?'true':'false');}
function pick(li){all.forEach(function(o){o.removeAttribute('aria-selected');});li.setAttribute('aria-selected','true');st.textContent='Geopend: '+lab(li);}
tree.addEventListener('click',function(e){var row=e.target.closest('.bdt__row');if(!row)return;var li=row.parentElement;go(li);if(isParent(li))toggle(li);else pick(li);});
tree.addEventListener('keydown',function(e){var li=e.target.closest('.bdt__i');if(!li)return;var v=visible(),i=v.indexOf(li),k=e.key,done=true;
if(k==='ArrowDown')go(v[i+1]);else if(k==='ArrowUp')go(v[i-1]);
else if(k==='ArrowRight'){if(isParent(li)){if(li.getAttribute('aria-expanded')==='false')toggle(li,true);else go(li.querySelector('.bdt__i'));}}
else if(k==='ArrowLeft'){if(isParent(li)&&li.getAttribute('aria-expanded')==='true')toggle(li,false);else go(li.parentElement.closest('.bdt__i'));}
else if(k==='Home')go(v[0]);else if(k==='End')go(v[v.length-1]);
else if(k==='Enter'||k===' '){if(isParent(li))toggle(li);else pick(li);}
else if(k==='*'){[].forEach.call(li.parentElement.children,function(s){toggle(s,true);});}
else if(k.length===1&&/\S/.test(k)){var c=k.toLowerCase(),n=v.slice(i+1).concat(v.slice(0,i+1)).find(function(o){return lab(o).toLowerCase().indexOf(c)===0;});go(n);}
else done=false;
if(done)e.preventDefault();});
}
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 →