We're currently working on the future of the Design system at Co-op

We'll start talking about this publicly as soon as we can. In the meantime this site will remain up to date with our current design patterns.

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>