Overview

Jump links are a set of in-page navigational links that allow users to quickly scroll to specific headings or sections within a page, improving access to key content. This component is especially useful for long pages, enabling users to jump directly to important areas without manual scrolling. Jump links are typically displayed at the top of the page or in a sticky navigation bar, providing a streamlined user experience.

Default

.bt1d-jump-links

Jump Link Title

• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6

Below is the HTML structure for the jump links component:

<section class="bt1d-jump-links">
  <h2 class="jump-links__title">Jump Link Title</h2>

  <ul class="jump-links__list">
    <li class="jump-links__list-item"><a href="#heading-1">Heading 1</a></li>
    <li class="jump-links__list-item"><a href="#heading-2">Heading 2</a></li>
    <li class="jump-links__list-item"><a href="#heading-3">Heading 3</a></li>
    <li class="jump-links__list-item"><a href="#heading-1">Heading 4</a></li>
    <li class="jump-links__list-item"><a href="#heading-2">Heading 5</a></li>
    <li class="jump-links__list-item"><a href="#heading-3">Heading 6</a></li>  
  </ul>
</section>

Key Features

• Customizable Title: The component includes a title element (jump-links__title) that can be customized to suit the context, providing a clear introduction to the list of jump links.
• List Structure: The jump links are organized as an unordered list (<ul class="jump-links__list">), making it easy to maintain and extend. Each list item (<li class="jump-links__list-item">) contains one link to a specific section. This semantic structure ensures accessibility and allows screen readers to interpret the navigation easily.
• List Items: Each list item (jump-links__list-item) corresponds to a section within the page, and you can create as many items as needed. These items visually represent the in-page navigation and offer users a structured, easy-to-scan set of links to the most important sections.