Skip to content

BypassBlock

Status: Stable

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

Navigation

Main content

Custom text and target

Navigation

Controls

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.

targetId

string
The ID of the element that this bypass block should skip to.