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