Copy code <nav class="accordion" role="navigation">
<ul class="accordion__list">
<li>
<input id="group-accordion_01-1" type="checkbox" hidden />
<label for="group-accordion_01-1">First level
<div class="svg-icon svg-icon--small">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-down-1"><path id="Vector" d="M23.25 7.31104L12.53 18.03C12.4604 18.0997 12.3778 18.155 12.2869 18.1927C12.1959 18.2304 12.0984 18.2498 12 18.2498C11.9016 18.2498 11.8041 18.2304 11.7131 18.1927C11.6222 18.155 11.5396 18.0997 11.47 18.03L0.75 7.31104" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg> </div>
</label>
<ul class="group-list">
<li><a href="#">1st level item</a></li>
<li>
<input id="sub-group-1" type="checkbox" hidden />
<label for="sub-group-1">Second level
<div class="svg-icon svg-icon--small">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-down-1"><path id="Vector" d="M23.25 7.31104L12.53 18.03C12.4604 18.0997 12.3778 18.155 12.2869 18.1927C12.1959 18.2304 12.0984 18.2498 12 18.2498C11.9016 18.2498 11.8041 18.2304 11.7131 18.1927C11.6222 18.155 11.5396 18.0997 11.47 18.03L0.75 7.31104" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg> </div>
</label>
<ul class="sub-group-list">
<li><a href="#">2nd level nav item</a></li>
<li><a href="#">2nd level nav item</a></li>
<li><a href="#">2nd level nav item</a></li>
<li>
<input id="sub-sub-group-1" type="checkbox" hidden />
<label for="sub-sub-group-1">Third level
<div class="svg-icon svg-icon--small">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-down-1"><path id="Vector" d="M23.25 7.31104L12.53 18.03C12.4604 18.0997 12.3778 18.155 12.2869 18.1927C12.1959 18.2304 12.0984 18.2498 12 18.2498C11.9016 18.2498 11.8041 18.2304 11.7131 18.1927C11.6222 18.155 11.5396 18.0997 11.47 18.03L0.75 7.31104" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg> </div>
</label>
<ul class="sub-sub-group-list">
<li><a href="#">3rd level nav item</a></li>
<li><a href="#">3rd level nav item</a></li>
<li><a href="#">3rd level nav item</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<input id="group-accordion_01-2" type="checkbox" hidden />
<label for="group-accordion_01-2">First level
<div class="svg-icon svg-icon--small">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-down-1"><path id="Vector" d="M23.25 7.31104L12.53 18.03C12.4604 18.0997 12.3778 18.155 12.2869 18.1927C12.1959 18.2304 12.0984 18.2498 12 18.2498C11.9016 18.2498 11.8041 18.2304 11.7131 18.1927C11.6222 18.155 11.5396 18.0997 11.47 18.03L0.75 7.31104" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg> </div>
</label>
<ul class="group-list">
<li>
<li><a href="#">1st level item</a></li>
<li><a href="#">1st level item</a></li>
<input id="sub-group-2" type="checkbox" hidden />
<label for="sub-group-2">Second level
<div class="svg-icon svg-icon--small">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-down-1"><path id="Vector" d="M23.25 7.31104L12.53 18.03C12.4604 18.0997 12.3778 18.155 12.2869 18.1927C12.1959 18.2304 12.0984 18.2498 12 18.2498C11.9016 18.2498 11.8041 18.2304 11.7131 18.1927C11.6222 18.155 11.5396 18.0997 11.47 18.03L0.75 7.31104" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg> </div>
</label>
<ul class="sub-group-list">
<li><a href="#">2nd level nav item</a></li>
<li><a href="#">2nd level nav item</a></li>
<li>
<input id="sub-sub-group-2" type="checkbox" hidden />
<label for="sub-sub-group-2">Third level
<div class="svg-icon svg-icon--small">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-down-1"><path id="Vector" d="M23.25 7.31104L12.53 18.03C12.4604 18.0997 12.3778 18.155 12.2869 18.1927C12.1959 18.2304 12.0984 18.2498 12 18.2498C11.9016 18.2498 11.8041 18.2304 11.7131 18.1927C11.6222 18.155 11.5396 18.0997 11.47 18.03L0.75 7.31104" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg> </div>
</label>
<ul class="sub-sub-group-list">
<li><a href="#">3rd level nav item</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<input id="group-accordion_01-3" type="checkbox" hidden />
<label for="group-accordion_01-3">First level
<div class="svg-icon svg-icon--small">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-down-1"><path id="Vector" d="M23.25 7.31104L12.53 18.03C12.4604 18.0997 12.3778 18.155 12.2869 18.1927C12.1959 18.2304 12.0984 18.2498 12 18.2498C11.9016 18.2498 11.8041 18.2304 11.7131 18.1927C11.6222 18.155 11.5396 18.0997 11.47 18.03L0.75 7.31104" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg> </div>
</label>
<ul class="group-list">
<li>
<li><a href="#">1st level item</a></li>
<li><a href="#">1st level item</a></li>
<input id="sub-group-3" type="checkbox" hidden />
<label for="sub-group-3">Second level
<div class="svg-icon svg-icon--small">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-down-1"><path id="Vector" d="M23.25 7.31104L12.53 18.03C12.4604 18.0997 12.3778 18.155 12.2869 18.1927C12.1959 18.2304 12.0984 18.2498 12 18.2498C11.9016 18.2498 11.8041 18.2304 11.7131 18.1927C11.6222 18.155 11.5396 18.0997 11.47 18.03L0.75 7.31104" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg> </div>
</label>
<ul class="sub-group-list">
<li><a href="#">2nd level nav item</a></li>
<li><a href="#">2nd level nav item</a></li>
<li><a href="#">2nd level nav item</a></li>
<li>
<input id="sub-sub-group-3" type="checkbox" hidden />
<label for="sub-sub-group-3">Third level
<div class="svg-icon svg-icon--small">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-down-1"><path id="Vector" d="M23.25 7.31104L12.53 18.03C12.4604 18.0997 12.3778 18.155 12.2869 18.1927C12.1959 18.2304 12.0984 18.2498 12 18.2498C11.9016 18.2498 11.8041 18.2304 11.7131 18.1927C11.6222 18.155 11.5396 18.0997 11.47 18.03L0.75 7.31104" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg> </div>
</label>
<ul class="sub-sub-group-list">
<li><a href="#">3rd level nav item</a></li>
<li><a href="#">3rd level nav item</a></li>
<li><a href="#">3rd level nav item</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<input id="group-accordion_01-4" type="checkbox" hidden />
<label for="group-accordion_01-4">First level
<div class="svg-icon svg-icon--small">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-down-1"><path id="Vector" d="M23.25 7.31104L12.53 18.03C12.4604 18.0997 12.3778 18.155 12.2869 18.1927C12.1959 18.2304 12.0984 18.2498 12 18.2498C11.9016 18.2498 11.8041 18.2304 11.7131 18.1927C11.6222 18.155 11.5396 18.0997 11.47 18.03L0.75 7.31104" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg> </div>
</label>
<ul class="group-list">
<li>
<li><a href="#">1st level item</a></li>
<input id="sub-group-4" type="checkbox" hidden />
<label for="sub-group-4">Second level
<div class="svg-icon svg-icon--small">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-down-1"><path id="Vector" d="M23.25 7.31104L12.53 18.03C12.4604 18.0997 12.3778 18.155 12.2869 18.1927C12.1959 18.2304 12.0984 18.2498 12 18.2498C11.9016 18.2498 11.8041 18.2304 11.7131 18.1927C11.6222 18.155 11.5396 18.0997 11.47 18.03L0.75 7.31104" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg> </div>
</label>
<ul class="sub-group-list">
<li><a href="#">2nd level nav item</a></li>
<li><a href="#">2nd level nav item</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>Copy code <nav class="accordion" role="navigation">
<ul class="accordion__list">
<li>
<input id="group-accordion_02-1" type="checkbox" hidden />
<label for="group-accordion_02-1">First level
<div class="svg-icon svg-icon--small">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-down-1"><path id="Vector" d="M23.25 7.31104L12.53 18.03C12.4604 18.0997 12.3778 18.155 12.2869 18.1927C12.1959 18.2304 12.0984 18.2498 12 18.2498C11.9016 18.2498 11.8041 18.2304 11.7131 18.1927C11.6222 18.155 11.5396 18.0997 11.47 18.03L0.75 7.31104" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg> </div>
</label>
<ul class="group-list">
<li><a href="#">1st level item</a></li>
<li>
<input id="sub-group-1" type="checkbox" hidden />
<label for="sub-group-1">Second level
<div class="svg-icon svg-icon--small">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-down-1"><path id="Vector" d="M23.25 7.31104L12.53 18.03C12.4604 18.0997 12.3778 18.155 12.2869 18.1927C12.1959 18.2304 12.0984 18.2498 12 18.2498C11.9016 18.2498 11.8041 18.2304 11.7131 18.1927C11.6222 18.155 11.5396 18.0997 11.47 18.03L0.75 7.31104" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg> </div>
</label>
<ul class="sub-group-list">
<li><a href="#">2nd level nav item</a></li>
<li><a href="#">2nd level nav item</a></li>
<li><a href="#">2nd level nav item</a></li>
<li>
<input id="sub-sub-group-1" type="checkbox" hidden />
<label for="sub-sub-group-1">Third level
<div class="svg-icon svg-icon--small">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-down-1"><path id="Vector" d="M23.25 7.31104L12.53 18.03C12.4604 18.0997 12.3778 18.155 12.2869 18.1927C12.1959 18.2304 12.0984 18.2498 12 18.2498C11.9016 18.2498 11.8041 18.2304 11.7131 18.1927C11.6222 18.155 11.5396 18.0997 11.47 18.03L0.75 7.31104" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg> </div>
</label>
<ul class="sub-sub-group-list">
<li><a href="#">3rd level nav item</a></li>
<li><a href="#">3rd level nav item</a></li>
<li><a href="#">3rd level nav item</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<input id="group-accordion_02-2" type="checkbox" hidden />
<label for="group-accordion_02-2">First level
<div class="svg-icon svg-icon--small">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-down-1"><path id="Vector" d="M23.25 7.31104L12.53 18.03C12.4604 18.0997 12.3778 18.155 12.2869 18.1927C12.1959 18.2304 12.0984 18.2498 12 18.2498C11.9016 18.2498 11.8041 18.2304 11.7131 18.1927C11.6222 18.155 11.5396 18.0997 11.47 18.03L0.75 7.31104" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg> </div>
</label>
<ul class="group-list">
<li>
<li><a href="#">1st level item</a></li>
<li><a href="#">1st level item</a></li>
<input id="sub-group-2" type="checkbox" hidden />
<label for="sub-group-2">Second level
<div class="svg-icon svg-icon--small">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-down-1"><path id="Vector" d="M23.25 7.31104L12.53 18.03C12.4604 18.0997 12.3778 18.155 12.2869 18.1927C12.1959 18.2304 12.0984 18.2498 12 18.2498C11.9016 18.2498 11.8041 18.2304 11.7131 18.1927C11.6222 18.155 11.5396 18.0997 11.47 18.03L0.75 7.31104" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg> </div>
</label>
<ul class="sub-group-list">
<li><a href="#">2nd level nav item</a></li>
<li><a href="#">2nd level nav item</a></li>
<li>
<input id="sub-sub-group-2" type="checkbox" hidden />
<label for="sub-sub-group-2">Third level
<div class="svg-icon svg-icon--small">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-down-1"><path id="Vector" d="M23.25 7.31104L12.53 18.03C12.4604 18.0997 12.3778 18.155 12.2869 18.1927C12.1959 18.2304 12.0984 18.2498 12 18.2498C11.9016 18.2498 11.8041 18.2304 11.7131 18.1927C11.6222 18.155 11.5396 18.0997 11.47 18.03L0.75 7.31104" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg> </div>
</label>
<ul class="sub-sub-group-list">
<li><a href="#">3rd level nav item</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<input id="group-accordion_02-3" type="checkbox" hidden />
<label for="group-accordion_02-3">First level
<div class="svg-icon svg-icon--small">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-down-1"><path id="Vector" d="M23.25 7.31104L12.53 18.03C12.4604 18.0997 12.3778 18.155 12.2869 18.1927C12.1959 18.2304 12.0984 18.2498 12 18.2498C11.9016 18.2498 11.8041 18.2304 11.7131 18.1927C11.6222 18.155 11.5396 18.0997 11.47 18.03L0.75 7.31104" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg> </div>
</label>
<ul class="group-list">
<li>
<li><a href="#">1st level item</a></li>
<li><a href="#">1st level item</a></li>
<input id="sub-group-3" type="checkbox" hidden />
<label for="sub-group-3">Second level
<div class="svg-icon svg-icon--small">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-down-1"><path id="Vector" d="M23.25 7.31104L12.53 18.03C12.4604 18.0997 12.3778 18.155 12.2869 18.1927C12.1959 18.2304 12.0984 18.2498 12 18.2498C11.9016 18.2498 11.8041 18.2304 11.7131 18.1927C11.6222 18.155 11.5396 18.0997 11.47 18.03L0.75 7.31104" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg> </div>
</label>
<ul class="sub-group-list">
<li><a href="#">2nd level nav item</a></li>
<li><a href="#">2nd level nav item</a></li>
<li><a href="#">2nd level nav item</a></li>
<li>
<input id="sub-sub-group-3" type="checkbox" hidden />
<label for="sub-sub-group-3">Third level
<div class="svg-icon svg-icon--small">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-down-1"><path id="Vector" d="M23.25 7.31104L12.53 18.03C12.4604 18.0997 12.3778 18.155 12.2869 18.1927C12.1959 18.2304 12.0984 18.2498 12 18.2498C11.9016 18.2498 11.8041 18.2304 11.7131 18.1927C11.6222 18.155 11.5396 18.0997 11.47 18.03L0.75 7.31104" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg> </div>
</label>
<ul class="sub-sub-group-list">
<li><a href="#">3rd level nav item</a></li>
<li><a href="#">3rd level nav item</a></li>
<li><a href="#">3rd level nav item</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<input id="group-accordion_02-4" type="checkbox" hidden />
<label for="group-accordion_02-4">First level
<div class="svg-icon svg-icon--small">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-down-1"><path id="Vector" d="M23.25 7.31104L12.53 18.03C12.4604 18.0997 12.3778 18.155 12.2869 18.1927C12.1959 18.2304 12.0984 18.2498 12 18.2498C11.9016 18.2498 11.8041 18.2304 11.7131 18.1927C11.6222 18.155 11.5396 18.0997 11.47 18.03L0.75 7.31104" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg> </div>
</label>
<ul class="group-list">
<li>
<li><a href="#">1st level item</a></li>
<input id="sub-group-4" type="checkbox" hidden />
<label for="sub-group-4">Second level
<div class="svg-icon svg-icon--small">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="arrow-down-1"><path id="Vector" d="M23.25 7.31104L12.53 18.03C12.4604 18.0997 12.3778 18.155 12.2869 18.1927C12.1959 18.2304 12.0984 18.2498 12 18.2498C11.9016 18.2498 11.8041 18.2304 11.7131 18.1927C11.6222 18.155 11.5396 18.0997 11.47 18.03L0.75 7.31104" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg> </div>
</label>
<ul class="sub-group-list">
<li><a href="#">2nd level nav item</a></li>
<li><a href="#">2nd level nav item</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>