Sticky nav with status
The sticky nav component is based on the page nav component and is is primarily for navigating within a page, but can also be used to navigate between pages.
It is sticky within its wrapper at desktop sizes when there is room for a sidebar and is fixed to the top of the screen at smaller sizes.
Other elements can be set to be included in the mobile version e.g. back buttons.
In the example on this page, the id of the "Back to application overview" link has been added to the sticky-nav actions attribute, so it is given special styling at mobile sizes (see example code at bottom of this page).
Note: the examples on this page are URLs, not fragments.
Quia non facilis in ipsam
Quas accusamus ratione ut animi qui mollitia voluptas quis eius maiores. accusamus saepe ab sit doloremque accusantium possimus commodi. dolorem voluptatem doloremque illum placeat officia excepturi commodi sit rerum rerum sunt. rem sit dolores sunt facere deleniti libero fugit dolorum consequatur expedita eum et suscipit. optio consectetur quidem reprehenderit fuga quisquam quod autem nihil voluptas sunt dolore excepturi non eum. ut harum occaecati nihil assumenda similique dignissimos minima ab qui cum alias in Esse minima corrupti ea voluptatem vero. eaque quia a sunt aliquid dolor sunt voluptatem. ut voluptatibus fugit vel est eveniet. voluptatem beatae vero qui magnam ut sunt magni Iure perferendis suscipit pariatur laborum cumque optio sunt ut odio architecto aliquid sint voluptatem rerum. harum nihil ea laborum et nemo ut dolorem reprehenderit. nihil libero voluptas aut quia nemo saepe quidem rerum autem beatae laborum ipsam. et dolore enim et adipisci ipsum dolor eius suscipit sunt. quia ut tenetur dolorem et maxime voluptatem numquam velit dolorum.
Molestias rerum tenetur sunt corrupti in iste ex est voluptatibus. quam adipisci est et maxime occaecati. esse repudiandae quis adipisci molestias deserunt sint. rerum labore nobis aut ullam nobis. et labore eos doloremque. ab fugit tempore ab Quisquam et unde occaecati qui exercitationem laudantium impedit veniam soluta natus modi autem. a ad dicta ut odio facere necessitatibus eos quod aperiam fugiat voluptatem. deserunt voluptatem voluptate facilis. eum neque libero in doloribus dolorum voluptates distinctio. eum doloribus molestias tenetur cumque sit sit accusamus accusamus. minus cumque itaque pariatur qui Nesciunt sapiente eaque cumque molestias inventore animi ut minus nesciunt eum. aliquid odit odio laudantium ut mollitia exercitationem est ipsa. ut cumque neque repellat est porro eius ut ipsum rerum reiciendis dolores doloribus nisi. illum suscipit officia ut molestias sit. culpa tenetur sed tempora delectus. minima est assumenda fugit alias beatae vitae consequatur.
Odio enim quia aut voluptatem inventore ut. sed alias inventore magni qui nihil pariatur quia aut. similique voluptatum et earum dolore Minima fugit harum enim facilis et. possimus expedita reiciendis voluptatem doloribus maxime impedit facere voluptatibus qui labore et et. adipisci voluptatem labore quae deserunt quo veritatis autem quaerat. provident ut sapiente sunt. officiis eveniet adipisci excepturi et est neque recusandae nulla qui eos. corporis est sit esse. incidunt eveniet voluptatem inventore quia nihil Rem voluptas nemo illum quia. quidem dolor rerum numquam quod mollitia dolores et et quasi et inventore alias non. officiis dicta ipsa consequatur modi. qui dolores sunt et nobis quo libero iusto harum eligendi est. unde quam libero est similique aliquid ut. dolore ut itaque non voluptate ea necessitatibus et numquam. distinctio quibusdam doloremque porro eaque eligendi dolore vel dolores mollitia ut dolor cum.
Temporibus quidem ad quis vel corrupti mollitia molestiae enim occaecati ipsum. consequatur asperiores beatae qui sint laudantium doloremque et facilis iste non nulla dolores. non aut quia ullam dolorum dolores fugit quo voluptates. libero dolorem optio voluptate velit et qui voluptatem qui natus et eos non Et fugit enim voluptatem repellat. officiis illo autem vel sequi et rerum maxime tempore itaque id possimus repellendus. doloremque voluptate ex quae velit. itaque earum ut laboriosam exercitationem facilis voluptatem et error consectetur voluptas. ab voluptas ex esse provident Ratione et officia eum debitis saepe enim. necessitatibus mollitia expedita eum omnis. architecto sint ea voluptate et qui pariatur modi quidem quia delectus doloribus quibusdam aut sint.
Earum quis est quam ducimus. dignissimos saepe unde ullam soluta unde impedit recusandae vel provident illo qui porro consequatur. et et praesentium est est voluptas. ducimus molestiae minus unde et. rerum reprehenderit dicta placeat optio est perferendis dolores voluptatibus eaque earum. explicabo excepturi qui repudiandae ratione Eum voluptatem velit non expedita repudiandae repudiandae quo sed ut officia ad. dolores quod reiciendis aut fugit voluptatibus magnam quis aperiam quos ut. error dolorum omnis ut quae debitis non ipsum aut est necessitatibus sint nemo Aut debitis dolores veritatis corporis animi. asperiores numquam velit vel. rem maiores qui assumenda laboriosam. nam minima repudiandae enim optio. quas a excepturi reprehenderit laborum aut sit consequatur consectetur id et aut enim. et dignissimos itaque maxime similique aliquid ipsam cum voluptatem commodi ut. expedita est rem asperiores laboriosam.
<!-- START sticky-nav component -->
<nav class="sticky-nav-container page-nav-container" data-sticky-nav-actions='["example-back-button"]'>
<div id="sticky-nav" class="sticky-nav page-nav" data-sticky-nav-label='Assumenda amet consequatur aspernatur occaecati'>
<ul class="sticky-nav__items">
<li class="page-nav__item"><a href="../../../index.html" id="example-back-button" class="sticky-nav__back-button">Back to application overview</a></li>
<!-- PLEASE NOTE -->
<!-- If ANY of the sections has a 'status', please add the navigation-status class to ALL the li elements. -->
<!-- If NONE of the sections has a 'status', please remove the navigation-status class from ALL the li elements. -->
<!-- (It's to line things up nicely, and I couldn't think of an automatic way to do it in CSS only.) -->
<li class="sticky-nav__item page-nav__item navigation-status navigation-status--complete icon-inline--left">
<a href="#1">Personal details</a>
</li>
<li class="sticky-nav__item page-nav__item navigation-status navigation-status--in-progress icon-inline--left">
<a href="#2">Contact details</a>
</li>
<li class="sticky-nav__item page-nav__item navigation-status">
<a href="#3">Work experience</a>
</li>
<li class="sticky-nav__item page-nav__item navigation-status">
<a href="#4">Education</a>
</li>
<li class="sticky-nav__item page-nav__item navigation-status">
<a href="#5">Residency and nationality</a>
</li>
<li class="sticky-nav__item page-nav__item navigation-status">
<a href="#6">Supporting information</a>
</li>
<li class="sticky-nav__item page-nav__item navigation-status">
<a href="#7">Personal statement</a>
</li>
<li class="sticky-nav__item page-nav__item navigation-status">
<a href="#8">Choices</a>
</li>
<li class="sticky-nav__item page-nav__item navigation-status">
<a href="#9">Reference</a>
</li>
</ul>
</div>
</nav>
<!-- END sticky-nav component -->