Skip to main contentSkip to site search
Honeycomb

Skip links

Skip links are links used to skip lengthy parts of the interactive content and provide users that are navigating with the keyboard with handy shortcuts to the main content area.

Examples of where skip links can be useful:

  • On the header, the first item of the page is a link to skip the main navigation and go to the main content or to the language switcher;
  • To skip a lengthy table of contents directly to the beginning of an article;

Skip links are visually hidden by default and only appear once the user tabs into them. To make them work you should use an anchor to link to an element on the same page.

Example of a link to skip the table of contents:

An introduction to Skip links

Skip links help keyboard users get around your web page by giving them shortcuts to jump to areas of interest.

Table of Contents

Skip table of contents
  1. Introduction
  2. How to implement
  3. Examples
  4. Another section
  5. Making the example believable
  6. Adding a little more cluttering

Introduction

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut aliquam mi. Curabitur id tincidunt ante. Vestibulum efficitur velit orci, a lobortis lorem imperdiet sed. Nam fringilla ipsum quam, iaculis pretium est cursus rutrum. Mauris non tortor sit amet leo varius venenatis. Sed fermentum felis non tellus ullamcorper, in aliquam diam mattis.

How to implement

Quisque nec ornare turpis, commodo feugiat sapien. Duis leo dui, dictum et nunc ac, aliquam vestibulum erat. Phasellus eget aliquet risus, in ultricies orci. Curabitur purus massa, semper sit amet dui id, pretium volutpat enim. Etiam placerat sit amet diam id eleifend.

Examples

Integer porta quam quis feugiat cursus. Suspendisse et purus dictum, rhoncus lectus eu, suscipit nisi. Suspendisse eu ligula nisi. Sed non interdum felis, posuere lacinia metus. Cras ut nulla sit amet enim finibus scelerisque. 

<article>
  <h1 class="flix-h1">An introduction to Skip links</h1>
  <p class="flix-text">Skip links help keyboard users get around your web page by giving them shortcuts to jump to areas of interest.</p>

  <section aria-label="Table of Contents">
    <h2 class="flix-h2">Table of Contents</h2>
    <a class="flix-skip-link" href="#article-content">
      Skip table of contents
    </a>
    <ol class="flix-list">
      <li><a class="hcr-link-10-8-1" href="#introduction">Introduction</a></li>
      <li><a class="hcr-link-10-8-1" href="#how-to-implement">How to implement</a></li>
      <li><a class="hcr-link-10-8-1" href="#examples">Examples</a></li>
      <li><a class="hcr-link-10-8-1" href="#">Another section</a></li>
      <li><a class="hcr-link-10-8-1" href="#">Making the example believable</a></li>
      <li><a class="hcr-link-10-8-1" href="#">Adding a little more cluttering</a></li>
    </ol>
  </section>

  <section id="article-content" aria-label="Article content">
    <h2 class="flix-h2" id="introduction">Introduction</h2>
    <p class="flix-text">
      Lorem ipsum dolor sit <a class="hcr-link-10-8-1" href="#">amet</a>, consectetur adipiscing elit. Sed ut aliquam mi. Curabitur id tincidunt ante. Vestibulum efficitur velit orci, a lobortis lorem imperdiet sed. Nam fringilla ipsum quam, iaculis pretium est cursus rutrum. Mauris non tortor sit amet leo varius venenatis. Sed <a class="hcr-link-10-8-1" href="#">fermentum felis non tellus ullamcorper</a>, in aliquam diam mattis.
    </p>

    <h2 class="flix-h2" id="how-to-implement">How to implement</h2>
    <p class="flix-text">
      Quisque nec ornare turpis, commodo feugiat sapien. Duis leo dui, dictum et nunc ac, aliquam vestibulum erat. Phasellus eget aliquet risus, in ultricies orci. Curabitur purus massa, semper sit amet dui id, pretium volutpat enim. Etiam placerat sit amet <a class="hcr-link-10-8-1" href="#">diam id eleifend</a>.
    </p>

    <h2 class="flix-h2" id="examples">Examples</h2>
    <p class="flix-text">
      Integer porta quam quis <a class="hcr-link-10-8-1" href="#">feugiat cursus</a>. Suspendisse et purus dictum, rhoncus lectus eu, suscipit nisi. Suspendisse eu ligula nisi. Sed non interdum felis, posuere lacinia metus. Cras ut nulla sit amet enim finibus scelerisque.
    </p>
  </section>
</article>

Keep them to a minimum

In most cases, a single skip link is sufficient. For pages that have very few navigable items preceding the main content, a skip link may not be necessary at all. On the other hand, a very complex page with several repeated elements may necessitate additional skip links. Remember, the purpose of skip navigation links is to make keyboard navigation more efficient. Adding more links increases link clutter and should be avoided.