Sidenav Styles

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut bibendum enim, et porta nibh. Maecenas neque neque, porttitor eu ullamcorper quis, pellentesque eu risus. Donec sed nisi sed nisi commodo dictum. In congue, orci in imperdiet tristique, mi nisl vulputate augue, quis varius elit orci euismod nunc. Ut lorem elit, luctus a mi eget, luctus malesuada sem. Phasellus semper ligula mi. Quisque blandit ornare sapien, pretium tempus sapien viverra eu.

Nam sit amet massa et justo porttitor mollis. Ut semper posuere bibendum. Nam non sagittis nibh. Integer tempus est sed augue tempor sollicitudin. Praesent blandit elit commodo sapien iaculis malesuada. Nullam non magna quis quam convallis vestibulum vitae vitae justo. Cras euismod interdum cursus. In varius a enim ac mollis. Morbi et faucibus turpis, sit amet pharetra lacus. Cras feugiat eros et enim laoreet maximus. Duis quis tortor vehicula, rutrum dui id, luctus turpis. Donec ac mauris gravida elit efficitur facilisis. Donec at ante vitae velit semper finibus.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam at cursus risus. Nulla efficitur scelerisque vestibulum. Suspendisse non urna nulla. Quisque in semper diam. Nulla imperdiet, purus in vehicula convallis, purus dui consequat justo, ac ultricies augue mauris ut ipsum. Fusce lobortis eget odio sit amet cursus. Donec in ipsum tortor. Curabitur a tortor at lectus vulputate efficitur at vel justo. Integer blandit nisl risus, eu dictum diam consequat vel. Nunc sit amet dignissim elit, nec eleifend ipsum. Proin aliquam pulvinar tellus iaculis hendrerit. Fusce porttitor convallis metus nec vestibulum. Praesent elit dui, porttitor aliquam nulla sed, vulputate posuere turpis.

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

Sidenav Styles

Best Practice

Code

Side Navigation

Sidenav Documentation

Use