Skip Navigation
React Magma

Skip Link

Because the main content is often not the first thing on a page, it is valuable to provide a Skip Navigation link to allow users who navigate via keyboard and/or screen reader to jump directly to the content. The SkipLink component is the button that will jump the user to the main content area.

Due to the nature of SkipLinks the best way to view the examples is to click "EDIT IN CODESANDBOX". When codesandbox loads click "open in new window" and hit tab to give focus to the SkipLink.

Basic Usage

SkipLink should be the first item in your app, positioned in the DOM before the navigation and the content. Users will not see the component unless they are navigating by keyboard.

The SkipLinkContent component is the div that is the target of the SkipLink. It can either be used as a wrapper for your content, or as a sibling of your content. If there is an h1 heading inside the SkipLinkContent, the h1 will receive focus. Otherwise, just the SkipLinkContent div itself will get focus.

Because the SkipLink and SkipLinkContent work based on an id, it is important that you only have one pair of these elements on a page.

import React from 'react';


import {
  SkipLink,
  SkipLinkContent,
  Paragraph,
  Hyperlink,
} from 'react-magma-dom';


const SideNav = ({ length }) => {
  return (
    <nav>
      {[...Array(length).keys()].map(index => (
        <div key={index}>
          <Hyperlink to={`#${index}`}>Link ${index}</Hyperlink>
        </div>
      ))}
    </nav>
  );
};


export function Example() {
  return (
    <div>
      <SkipLink buttonText="Skip to main content" />
      <SideNav length={500} />
      <SkipLinkContent>
        <Paragraph>Content to jump to.</Paragraph>
      </SkipLinkContent>
      <Paragraph>Additional content.</Paragraph>
    </div>
  );
}

When the user tabs to the first element, a hyperlink with this appearance will display in focus:

Button Variations

By default, the SkipLink looks like a standard button with color asprimary, variant as solid, and isInverse as false.

Variants for buttons include solid, outline, and link. Colors for buttons include primary, secondary, success, and danger. IsInverse is can be either true or false, and is used when the SkipLink is to appear on a dark background.

For more information, see the Button Component documentation.

import React from 'react';


import {
  SkipLink,
  SkipLinkContent,
  Paragraph,
  Hyperlink,
  ButtonVariant,
} from 'react-magma-dom';


const SideNav = ({ length }) => {
  return (
    <nav>
      {[...Array(length).keys()].map(index => (
        <div key={index}>
          <Hyperlink to={`#${index}`}>Link ${index}</Hyperlink>
        </div>
      ))}
    </nav>
  );
};


export function Example() {
  return (
    <div>
      <SkipLink
        buttonText="Skip to main content"
        variant={ButtonVariant.solid}
      />
      <SideNav length={500} />
      <SkipLinkContent>
        <Paragraph>Content to jump to.</Paragraph>
      </SkipLinkContent>
      <Paragraph>Additional content.</Paragraph>
    </div>
  );
}

Button Text

By default, the text inside the button says "Skip Navigation". This can be overridden using the buttonText prop.

import React from 'react';


import {
  SkipLink,
  SkipLinkContent,
  Paragraph,
  Hyperlink,
} from 'react-magma-dom';


const SideNav = ({ length }) => {
  return (
    <nav>
      {[...Array(length).keys()].map(index => (
        <div key={index}>
          <Hyperlink to={`#${index}`}>Link ${index}</Hyperlink>
        </div>
      ))}
    </nav>
  );
};


export function Example() {
  return (
    <div>
      <SkipLink buttonText="Skip to main content" />
      <SideNav length={500} />
      <SkipLinkContent>
        <Paragraph>Content to jump to.</Paragraph>
      </SkipLinkContent>
      <Paragraph>Additional content.</Paragraph>
    </div>
  );
}

Positioning

By default, the SkipLink is fixed positioned 10px from the top and 10px from left of the screen. This can be customized using the optional positionLeft and positionTop properties, which take numeric values.

import React from 'react';


import {
  SkipLink,
  SkipLinkContent,
  Paragraph,
  Hyperlink,
} from 'react-magma-dom';


const SideNav = ({ length }) => {
  return (
    <nav>
      {[...Array(length).keys()].map(index => (
        <div key={index}>
          <Hyperlink to={`#${index}`}>Link ${index}</Hyperlink>
        </div>
      ))}
    </nav>
  );
};


export function Example() {
  return (
    <div>
      <SkipLink
        buttonText="Skip to main content"
        positionLeft={25}
        positionTop={25}
      />
      <SideNav length={500} />
      <SkipLinkContent>
        <Paragraph>Content to jump to.</Paragraph>
      </SkipLinkContent>
      <Paragraph>Additional content.</Paragraph>
    </div>
  );
}

With AppBar

The SkipLink works concurrently with AppBar which assists in keyboard navigation.

import React from 'react';


import {
  AppBar,
  AppBarPosition,
  SkipLink,
  SkipLinkContent,
  Paragraph,
} from 'react-magma-dom';


export function Example() {
  return (
    <div style={{ height: '400px', overflow: 'auto', position: 'relative' }}>
      <AppBar position={AppBarPosition.sticky}>AppBar content</AppBar>
      <SkipLink buttonText="Skip to main content" />


      <Paragraph>
        Peel the onion peel the onion, so the horse is out of the barn per my
        previous email, nor draw a line in the sand. I just wanted to give you a
        heads-up drink from the firehose, game plan back-end of third quarter
        viral engagement. Eat our own dog food driving the initiative forward
        tribal knowledge increase the pipelines, but run it up the flag pole.
      </Paragraph>
      <SkipLinkContent>
        <Paragraph id="last-one">
          Turn the crank regroup can we align on lunch orders, so regroup, yet
          the last person we talked to said this would be ready, for this vendor
          is incompetent , or pipeline. We've bootstrapped the model zeitgeist,
          so let's schedule a standup during the sprint to review our kpis, so
          not the long pole in my tent we're ahead of the curve on that one, and
          we're ahead of the curve on that one.{' '}
        </Paragraph>
      </SkipLinkContent>
    </div>
  );
}

This would render the button 25px from the top, and 25px from the left of the browser window.

This component uses forwardRef. The ref is applied to the a element.

All of the standard anchor attributes can be provided as props and will be applied to the a element that gets rendered.

buttonText

Description

The text in the skip link

Type

string

Default

"Skip Navigation"

positionLeft

Description

Number of pixels from the left of the screen for the skip link to be positioned

Type

number

Default

10

positionTop

Description

Number of pixels from the top of the screen for the skip link to be positioned

Type

number

Default

10

Skip Link Content Props

children

Required

Description

The content of the component

Type

ReactNode | undefined

Default

-

On this page

Deploys by Netlify