This component implements the bypass block pattern to provide direct access to the primary content of a web page for users who navigate sequentially through content using a keyboard or a similar device. It becomes visible when it receives focus and skips to a particular location in the page (usually the primary content) when activated.
Variants
Note: To see the bypass block in the following examples, it is necessary to use the Tab key to give it focus.
Default
Custom text and target
Development
import BypassBlock from '@nerdwallet/react-bypass-block';<BypassBlock />Props
<BypassBlock>
className
string
Additional classes to be added to the containing element.
dangerouslyForceVisible
boolean
Forces the bypass block to be visible, even if it doesn't have focus. Can be useful for testing layout, but it should NOT be used in production.
label
string
The label for the bypass block; this should describe where the user will skip to.
Default
'Skip to content'
targetId
string
The ID of the element that this bypass block should skip to.
Default
'main'