Skip link

Large applications often have many navigation links and other focusable elements before the main content. A skip link lets keyboard users bypass them. It is visually hidden until it receives keyboard focus, so users typically reach it by pressing Tab at the start of the page.

Note

This documentation site has its own skip link. Reload the page and press Tab to see “Skip to content” appear in the top corner.

A skip link needs two elements:

• The target element to skip to, with an id.
• The link pointing to that target, with its href set to the target’s id (including the # prefix).

✅ Do

• Place the skip link as the first focusable element on the page.
• Point the skip link to the main content of the page.
• Provide a clear, localized label such as “Skip to main content”.

🚫 Don’t

• Don’t keep the skip link hidden when it has keyboard focus.
• Don’t add tabindex="-1" to the target. Modern browsers move focus to in-page link targets without it, and on large containers it can make focus jump back to the target unexpectedly.

API reference

• Button