In-Page nav

The in-page nav (or page contents as it is sometimes called) is placed above main content of a page and provides navigation to individual anchor links located on the same page.

Useful on stand alone (no child pages) landing pages with lots of content. For example a course page or a campaign page.

Use at top of page before content and after h1 or banner. Include a maximum of eight links (this means you should limit your main page sections to eight also).

This nav becomes sticky on scroll.

In-page nav

ready 
<div class="ds-block ds-block--full-width ds-page-nav-container">

    <nav class="ds-page-nav ds-page-nav--centered">
        <ul class="ds-page-nav__list">
            <li class="ds-page-nav__list-item"><a class="ds-page-nav__link" href="#overview">Overview</a></li>
            <li class="ds-page-nav__list-item"><a class="ds-page-nav__link" href="#course-stucture">Course structure</a></li>
            <li class="ds-page-nav__list-item"><a class="ds-page-nav__link" href="#entry-requirements">Entry requirements</a></li>
            <li class="ds-page-nav__list-item"><a class="ds-page-nav__link" href="#pathways">Pathways</a></li>
            <li class="ds-page-nav__list-item"><a class="ds-page-nav__link" href="#career-outcomes">Career outcomes</a></li>
            <li class="ds-page-nav__list-item"><a class="ds-page-nav__link" href="#fees-and-scholarships">Fees and scholarships</a></li>
            <li class="ds-page-nav__list-item"><a class="ds-page-nav__link" href="#how-to-apply">How to apply</a></li>
        </ul>
    </nav>

</div>

In-page nav with CTA

ready

You can us a ds-btn-primary ds-btn–small button on the last link for a primary call to action if required.

<div class="ds-block ds-block--full-width ds-page-nav-container">

    <nav class="ds-page-nav ds-page-nav--centered">
        <ul class="ds-page-nav__list">
            <li class="ds-page-nav__list-item"><a class="ds-page-nav__link" href="#overview">Overview</a></li>
            <li class="ds-page-nav__list-item"><a class="ds-page-nav__link" href="#course-stucture">Course structure</a></li>
            <li class="ds-page-nav__list-item"><a class="ds-page-nav__link" href="#entry-requirements">Entry requirements</a></li>
            <li class="ds-page-nav__list-item"><a class="ds-page-nav__link" href="#pathways">Pathways</a></li>
            <li class="ds-page-nav__list-item"><a class="ds-page-nav__link" href="#career-outcomes">Career outcomes</a></li>
            <li class="ds-page-nav__list-item"><a class="ds-page-nav__link" href="#fees-and-scholarships">Fees and scholarships</a></li>
            <li class="ds-page-nav__list-item"><a class="ds-btn-primary ds-btn--small" href="#how-to-apply">How to apply</a></li>
        </ul>
    </nav>

</div>