SkipNav

Click here, then hit Tab on your keyboard.

<div>
  <p>Click here, then hit Tab on your keyboard.</p>
  <SkipNav />
</div>

<div>
  <p>Click here, then hit Tab on your keyboard.</p>
  <SkipNav />
</div>

Import

import SkipNav, { SkipToMainContent, SkipToSitemap } from '@politico/interactive-style/src/components/SkipNav';
// or
import { SkipNav, SkipToMainContent, SkipToSitemap  } from '@politico/interactive-style';

CSS

Name	Global Class	Description
root	PibSkipNav-root	Styles applied to root div
action	PibSkipNav-action	Styles applied to the action buttons

Demos

Full Demo

You can see the SkipNav in action. Click the text, and use the tab key to activate one of the buttons. Then click enter to skip to that section in the demo below. Remember that the "SkipToSitemap" is already included with the "Footer" component, but you'll need to place "SkipToMainContent" right above your content.

Click here, then hit Tab on your keyboard.

This is the main content.

This is the sitemap

<div>
  <p>Click here, then hit Tab on your keyboard.</p>
  <SkipNav />
  <p style={{marginTop: '1000px'}}>This is the main content.</p>
  <SkipToMainContent />
  <p style={{marginTop: '1000px'}}>This is the sitemap</p>
  <SkipToSitemap />
</div>
    
<div>
  <p>Click here, then hit Tab on your keyboard.</p>
  <SkipNav />
  <p style={{marginTop: '1000px'}}>This is the main content.</p>
  <SkipToMainContent />
  <p style={{marginTop: '1000px'}}>This is the sitemap</p>
  <SkipToSitemap />
</div>
    

Interactive Style

SkipNav

Import

CSS

Demos

Full Demo