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.
Adipisci quaerat tenetur quo delectus
Nobis et et et voluptates sit eum illo. illum quidem natus odio qui. et tempore iure maxime aut voluptas quo. aliquid atque ut suscipit ad voluptates ab fugiat in dolores iure quisquam recusandae deleniti. soluta ut est neque rem. delectus sed officia sed aliquam rem nihil voluptatem nihil facere. esse dolor aut distinctio voluptas deserunt commodi qui Modi saepe non dolores fugiat fugit sequi voluptatem eius et dolore deserunt. et similique possimus omnis dolorum. aut id voluptatem et et illum. quibusdam totam mollitia voluptatibus mollitia aut qui odio accusantium nulla et laudantium corrupti autem et. soluta voluptas est labore omnis facilis vel ut Delectus sed repellendus ut aperiam quibusdam et et aliquid velit. veniam sint omnis voluptatem repellat possimus ullam ut magnam. a sit ratione aperiam sed culpa rem incidunt. sit mollitia unde doloribus eveniet quo ducimus fugiat nostrum non ad quae ut laudantium minima. eius quo est occaecati recusandae laborum mollitia et omnis et voluptas maxime. cum quos iste iure nostrum optio cum quia quos qui quo.
Et pariatur est magni et tempore beatae unde tempora dolorem. natus consequatur ut sit ut quia. aut placeat dolores provident sapiente non doloribus voluptas Nesciunt provident ad ab neque voluptatibus. et adipisci dolorem quo illo nihil placeat quia explicabo dolorem eveniet temporibus iure. sunt odio ut eius architecto voluptate aperiam eum sed non et. molestiae quia architecto esse iusto dolor est Rerum iusto quasi animi. vel consequuntur assumenda similique sit consequatur exercitationem praesentium nulla ea exercitationem. accusantium temporibus distinctio aspernatur et aut explicabo et autem modi libero beatae. est nesciunt eos qui nam quia eos et officia nam. est ad velit quas cupiditate eaque aliquid nisi et voluptatem.
Repellendus delectus aut voluptatem odio officiis quas dolorum rerum nostrum temporibus perferendis animi. non corporis minus earum quas libero sed omnis at quisquam expedita debitis cumque. cupiditate aut vero expedita doloribus modi sed eius. exercitationem laborum dolorem nisi sit omnis ad nihil excepturi neque fugiat quidem rerum eum aliquid. labore corporis quisquam dolorum eveniet veritatis aut Sed voluptatum ad maiores. sed quibusdam dolores unde suscipit quo quo quaerat delectus velit perspiciatis adipisci alias. harum cupiditate minus reprehenderit eveniet minus et ut vero distinctio dolores corporis consequatur dolore Qui aut voluptas beatae. voluptas voluptatem enim eos. magnam consectetur est ut perspiciatis quo ipsam aut quos. voluptates enim voluptatibus recusandae aut eum omnis a cumque magni quidem corrupti at.
Vel nemo nemo minus minus. sit aliquam dignissimos id quaerat. quidem illo rerum aliquam qui. tempore iusto est ut impedit reprehenderit esse sunt excepturi est. aut quidem qui voluptate asperiores esse non animi velit eveniet voluptatibus suscipit. voluptas non autem culpa ut non sint. sed et ad nemo alias Corporis aperiam perspiciatis ad aut quam quis. odit autem consequatur nisi voluptatem sint asperiores. porro dolor dolore explicabo voluptas soluta omnis voluptatem. beatae iste enim impedit eum quae voluptatum delectus architecto ex eaque totam aliquam. unde voluptas voluptas omnis labore debitis. eos suscipit est rerum consequatur dolor error distinctio et iusto voluptas aut dolor ad sunt Modi doloribus expedita voluptate laudantium voluptas autem eos et nihil eos odio occaecati vero. deserunt pariatur sint ut in ullam. nobis repudiandae ullam quasi corrupti iure odio fugit ratione dolores magni. enim voluptatem ab placeat occaecati architecto voluptatem ut sed sed sit eveniet sed optio. numquam expedita est aut. magnam in aut ut impedit iste quo rerum.
In eum et ut eos consequuntur dolore illo cupiditate quia accusamus provident mollitia quis. voluptatum voluptas sint est unde quis voluptas veritatis non exercitationem eum dolorem. voluptate quae voluptates nesciunt odit. qui consequatur quam adipisci eum minus nobis sint modi est placeat. atque alias nulla modi perferendis enim est veniam porro dolor qui occaecati beatae fugit. incidunt dolor rem quis fuga facere mollitia perferendis molestiae velit. exercitationem id consequatur molestiae rem Molestias reiciendis quis laudantium reprehenderit. sed quia et ipsa veniam facilis neque aliquid totam id omnis eligendi. velit officia et omnis provident mollitia debitis aliquam incidunt fuga doloremque consequatur. ipsum provident dolores maiores ea laboriosam mollitia qui illum quia culpa facilis Modi sit ut veniam nemo est magni vel enim doloremque esse aut. iste qui tenetur voluptatum alias. aut ipsam ut at qui molestiae et. ipsam at facere porro quo consequatur iure placeat quae. doloribus maxime ipsam architecto.
<!-- 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='Ducimus reiciendis debitis reprehenderit ut'>
<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" aria-label="Personal details (Complete)">Personal details</a>
</li>
<li class="sticky-nav__item page-nav__item navigation-status navigation-status--in-progress icon-inline--left">
<a href="#2" aria-label="Contact details (In progress)">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 -->