Küljemenüü on kogu lehe pikkune ja ulatub alati jaluseni. Kui lehe sisu on pikem ning jalus ei ole lehele minnes kohe näha, siis on ka menüü taust pikem. Menüü võib sisaldada mitut taset menüüpunkte. Menüül võib sisaldada pealkirju.
<nav class="side-menu">
<h3 class="side-menu__title">Menüü pealkiri</h3>
<ul class="side-menu__top">
<li class="side-menu__item">
<a class="side-menu__link" href="#">Menüüpunkt alammenüüga
<i class="fas fa-chevron-down side-menu__icon" ></i>
</a>
</li>
<li class="side-menu__item">
<a class="side-menu__link" href="#">Menüüpunkt alammenüüga
<i class="fas fa-chevron-down side-menu__icon is-open" ></i>
</a>
<ul class="side-menu__sub">
<li class="side-menu__item">
<a class="side-menu__link" href="#">Alammenüüpunkt</a>
</li>
<li class="side-menu__item">
<a class="side-menu__link" href="#">Alammenüüpunkt</a>
</li>
</ul>
</li>
<li class="side-menu__item">
<a class="side-menu__link" href="#">Menüüpunkt
</a>
</li>
<li class="side-menu__item">
<a class="side-menu__link" href="#">Menüüpunkt
</a>
</li>
</ul>
</nav>
{
"title": "Menüü pealkiri",
"showTitle": true,
"items": [
{
"name": "Menüüpunkt alammenüüga",
"open": null,
"subitems": [
{
"name": "Alammenüüpunkt"
},
{
"name": "Alammenüüpunkt"
}
]
},
{
"name": "Menüüpunkt alammenüüga",
"open": true,
"subitems": [
{
"name": "Alammenüüpunkt"
},
{
"name": "Alammenüüpunkt"
}
]
},
{
"name": "Menüüpunkt"
},
{
"name": "Menüüpunkt"
}
]
}