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

For feedback and bug reports concerning PatternFly Elements components, create an issue in the GitHub repository.