Skip to content

BypassBlock

Status: Stable

Latest released: October 2020

Current version: v1.0.1

Storybook
GitHub

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

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'