Skip to main contentSkip to site searchSkip to component search
Honeycomb

Header skip links

Header container for adding the main site skip links such as 'Skip to main content'.

A container for skip links that will handle the absolute positioning of the links.

The header skip links are the main skip links, like "skip to main content" and other important landmarks. They serve as a shortcut for keyboard users to go to the main areas of interest of the web page.

The skip links should be the first interactive elements of the page, so you should add the container inside of the header and before everything else.

The nature of the skip links will depend on the nature of the page you're developing. For example:

  • The home page could have a link to skip to the language switcher and another to the booking search;
  • A blog post could have a link to skip to the blog article and to the site wide search form;

Try tabbing through the example bellow to reveal the skip links:

Skip to booking details Skip to language selection
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="#booking-details">
        Skip to booking details
      </a>
      <a class="flix-skip-link" href="#language-selection">
        Skip to language selection
      </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>