Jump-links

Jump-link menus allow the user to jump directly to a piece of content further down the page.

<div class="occlss-jump-links">
  <h2 class="occlss-jump-links__title">On this page</h2>
  <ul class="occlss-jump-links__nav">
    <li class="occlss-jump-links__nav-item"><a href="#jump-link-1" class="occlss-jump-links__lnk">Jump link 1</a></li>
    <li class="occlss-jump-links__nav-item"><a href="#jump-link-2" class="occlss-jump-links__lnk">Jump link 2</a></li>
    <li class="occlss-jump-links__nav-item"><a href="#jump-link-3" class="occlss-jump-links__lnk">Jump link 3</a></li>
  </ul>
</div>

When to use this component

Jump-link menus are only used once on a page and always at the very top.

Use this component to break up a large page of information into smaller chunks.

Jump-link pages are good for advice and general information pages where the user may be looking for something in particular and does not need to read everything on the page. With jump-links users can skip directly to the content they want.

When not to use it

Think about whether a jump-links page is the best option. For example, would index pages be a better way to provide the instructions for an application form?

Changelog

1.0.0

• Component added