Skip navigation live

A “skip navigation” link is used to create efficient access for users with certain disabilities.

Example

Example

Use the tab key to show this example.

HTML

                            <p>Use the tab key to show this example.</p>
<nav class="coop-c-skip-nav">
    <ul class="coop-c-skip-nav__list">
        <li><a href="#main" title="Skip to main content" class="coop-c-skip-nav__link">Skip to content</a></li>
        <li><a href="#navigation" title="Skip to main navigation" class="coop-c-skip-nav__link">Skip to main navigation</a></li>
    </ul>
</nav>

                            

CSS

                            
/* =========================================
Skip navigation - Co-op front-end components
============================================ */

@import "@coopdigital/foundations-vars";

.coop-c-skip-nav {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
}

.coop-c-skip-nav__list {
  list-style: none;
  margin: 0;
}

.coop-c-skip-nav__link {
  position: absolute;
  left: -9999px;
  top: 0;
  font-size: var(--type-medium--body);
  padding: var(--spacing-medium--1-4);
  color: var(--color-white);
  background: var(--color-grey-dark);
  white-space: nowrap;
}

.coop-c-skip-nav__link:focus,
.coop-c-skip-nav__link:active {
  left: var(--spacing-medium--1-4);
}

                            

Suggest a pattern or change

Use this form to suggest a new pattern or a change to an existing one.

Suggest a new pattern or a change