Skip to main contentSkip to site searchSkip to component search
Honeycomb

Skip Link

The skip link is used to provide easy shortcuts for keyboard users to jump lengthy parts of the content.

The markup for a skip link is very simple:

<a class="flix-skip-link" href="#section-id-to-jump-to">
  Skip to Main Content
</a>

To make them work you should use an anchor to link to an element on the same page.

Then add the flix-skip-link class name to the element, CSS will do the rest.

Here is an example of a skip link in the header:

Skip to main content
Honeycomb Logo 
<header class="flix-header flix-header--unfixed">
  <div class="flix-header__inner">
    
    <div class="flix-header-skip-links">
      <a class="flix-skip-link" href="#main-content">
        Skip to main content
      </a>
    </div>
    
    <div class="flix-header-brand flix-header-brand--square">
      <a class="flix-header-brand__link" href="/">
        <img class="flix-header-brand__img" width="36" height="36" src="/img/logos/svg/honeycomb-white.svg" alt="Honeycomb Logo"/>
      </a>
    </div>
  </div>
</header>