Skip navigation
Overview
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.
Sample component
Style
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.
Usage
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.
Best practices
Don't apply the skip to main content link style to other components.
Behavior
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.
Spacing
A skip to main content link uses PatternFly 4 spacers to define spacing values between elements.
Feedback
To give feedback about anything on this page, contact us.
Foundations
To learn how to use our other components in your designs, visit the Elements section.
