Skip navigation

Skip navigation is a styled link that appears at the top of a page when the Tab key is pressed. It bypasses the navigation and jumps users down to the main content when selected.

Skip navigation

Skip to main content is a styled link that consists of a text label and a background container. Even though it looks like a Button, it functions more like a jump link.

Skip navigation specs

A skip to main content link helps some users browse the web more effectively. It should be invisible on every page as a commitment to accessibility.

Skip navigation usage
Skip navigation usage
Skip navigation usage

Don't apply the skip to main content link style to other components.

Skip navigation style errors

When a user presses the Tab key upon page load, the skip to main content link will appear centered at the top above the navigation. When a user presses the Enter key, the page will move down and the focus indicator should highlight the main content.

Skip navigation behavior

A skip to main content link uses PatternFly 4 spacers to define spacing values between elements.

Skip navigation spacing diagram

To give feedback about anything on this page, contact us.

To learn how to use our other components in your designs, visit the Components section.