Navigation

Skip to content

Skip to content navigation

Skip to content allows users to navigate a webpage using a keyboard. By clicking the tab key, they can move forward through all of the links on a page and by using Shift+tab they can move backwards through the links.

Open this skip to content example in a new tab
HTML
Press [tab] key to see the menu
<nav class="occlss-skip-to-content">
  <ul class="occlss-skip-to-content__skip-menu">
    <li class="occlss-skip-to-content__item">
      <a href="#main-nav" class="occlss-skip-to-content__skip-menu-link">skip to Main Navigation</a>
    </li>
    <li class="occlss-skip-to-content__item">
      <a href="#occlss-main-content" class="occlss-skip-to-content__skip-menu-link">skip to Main Content</a>
    </li>
    <li class="occlss-skip-to-content__item">
      <a href="#occlss-footer" class="occlss-skip-to-content__skip-menu-link">skip to Footer</a>
    </li>
  </ul>
</nav>

Changelog

1.0.0

  • Component added