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