Skip link

Style

A skip link is designed to be easily seen once a user navigates to it.

Anatomy

1. Text label
2. Container
3. Border

Theme

A skip link appears the same in both light and dark themes.

Configuration

A skip link’s bottom corners have a border radius of 4px, which matches the border radius of the call to action element. The top corners have a border radius of 0px to keep the top edge flush with the top of the page.

Placement

A skip link should be centered and aligned with the top edge at all viewport sizes. It also overlaps items at the top of the page.

Space

Interaction states

Interaction states are visual representations used to communicate the status of an element or pattern.

Focus

Because a skip link is in focus once it appears on the screen, the default and focus states are the same. The blue, 2px-wide border mimics the focus ring for other elements.

Hover

Active

Helpful tip

The Active state has the same styles as the Hover state.