Plugins used where deep navigation is required: header, aside.
/*
:: Plugin File
src/js/sow.core/sow.nav_deep.js
:: Plugin Init
*/ $.SOW.core.nav_deep.init('.nav-deep');
/*
:: Plugin Options|Defaults
*/ $.SOW.core.nav_deep.init('.nav-deep', {
speed: 200
});
<!--
All parent open navs are closed on click!
To ignore this feature, add .js-ignore to .nav-deep
Links height (paddings):
.nav-deep-xs
.nav-deep-md (default, ununsed class)
.nav-deep-sm
.nav-deep-lg
.nav-deep-hover hover background slightly different
.nav-deep-bordered bordered links
-->
<nav class="nav-deep nav-deep-light nav-deep-bordered nav-deep-xs">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">
<span class="group-icon float-end">
<i class="fi fi-arrow-end-slim"></i>
<i class="fi fi-arrow-down-slim"></i>
</span>
Components
</a>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="components-alerts.html">
Alerts
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="components-accordions.html">
Accordions
</a>
</li>
</ul>
</li>
</ul>
</nav>