Back to the pattern library

Skip navigation

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

Example

Example

HTML

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

SCSS

To use this component in your service add this import in your main SCSS file:

@import 'node_modules/@coopdigital/coop-frontend-components/navigation/skip-nav/_skip-nav.scss';

Customise this component by following the guide here.

JS

Accessibility

We are currently working on this.

For more information see our general guide on accessibility.

Suggest a pattern

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

Suggest a new pattern or a change