Sidenav Styles
Side Navigation
<aside class="sidenav grid__col grid__col-md--3">
<nav>
<ul>
<li class="sidenav__headline">
<span>
<a href="#LINK">PHD and research degrees</a>
<i class="ico ico--md ico--f-caret-l"></i>
</span>
</li>
<li class="sidenav__item">
<span>
<a href="#LINK">Side Navigation</a>
<i class="ico ico--md ico--f-caret-r"></i>
</span>
</li>
<li class="sidenav__item">
<span>
<a href="#LINK">Explore research degrees</a>
<i class="ico ico--md ico--f-caret-r"></i>
</span>
</li>
<li class="sidenav__item is-active">
<span>
<a href="#LINK">Areas of research</a>
<i class="ico ico--md ico--f-caret-r"></i>
</span>
<ul class="sidenav__sublist">
<li class="sidenav__subitem">
<a href="#LINK">Biological sciences</a>
</li>
<li class="sidenav__subitem">
<a href="#LINK">Business</a>
</li>
</ul>
</li>
<li class="sidenav__item">
<span>
<a href="#LINK">Cotutelle and international opportunities</a>
<i class="ico ico--md ico--f-caret-r"></i>
</span>
</li>
<li class="sidenav__item">
<span>
<a href="#LINK">How to apply</a>
<i class="ico ico--md ico--f-caret-r"></i>
</span>
</li>
<li class="sidenav__item">
<span>
<a href="#LINK">Fees and costs</a>
</span>
</li>
</ul>
</nav>
</aside>
Sidenav Documentation
Use
To make a heading active, add the class is-active to the li
Conditional logic is needed on the backend to set whether a link icon is visible if the item has child elements