SOW : Deep navigation
SOW plugins are part of Smarty Core, written from scratch!
src/js/sow.core/sow.nav_deep.js
Deep Navigation Example
<!--
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-hover 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="#">
<span class="group-icon float-end">
<i class="fi fi-arrow-end-slim"></i>
<i class="fi fi-arrow-down-slim"></i>
</span>
Alerts
</a>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link js-ajax" href="#">
<span class="group-icon float-end">
<i class="fi fi-arrow-end-slim"></i>
<i class="fi fi-arrow-down-slim"></i>
</span>
Item 1
</a>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link js-ajax" href="#">
Item A
<span class="group-icon float-end">
<i class="fi fi-arrow-end-slim"></i>
<i class="fi fi-arrow-down-slim"></i>
</span>
</a>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link js-ajax" href="#">
Item X
</a>
</li>
<li class="nav-item">
<a class="nav-link js-ajax" href="components-accordions.html">
Item Y
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link js-ajax" href="components-accordions.html">
Item B
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link js-ajax" href="components-accordions.html">
Item 2
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link js-ajax" href="components-accordions.html">
Accordions
</a>
</li>
</ul>
</li>
<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>
Something Else
</a>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link js-ajax" href="components-alerts.html">
Item 1
</a>
</li>
<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>
Item 2
</a>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link js-ajax" href="components-alerts.html">
Item 2.1
</a>
</li>
<li class="nav-item">
<a class="nav-link js-ajax" href="components-accordions.html">
Item 2.2
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#">Item 1</a></li>
<li class="nav-item"><a class="nav-link" href="#">Item 2</a></li>
<li class="nav-item"><a class="nav-link" href="#">Item 3</a></li>
</ul>
</nav>