Skip Nav

A "skip navigation" link is a technique for facilitating similarly efficient access for users with certain disabilities. Skips until to targetId.

install	version	usage	style
yarn add @ciceksepeti/cui-skip-nav	0.1.0	import {SkipNav} from '@ciceksepeti/cui-skip-nav'	import '@ciceksepeti/cui-skip-nav/style.css'

Wai-AriaW3

RepositoryGitHub

PackageNPM

StyleSass

Content

Enables skipping navigation or any other component when user tabs. Useful for situations when there are lots of component when tab is pressed to pass them.

Example

Example of a default behavior of SkipNav component. Renders as 'a' by default.

import React from 'react';
import SkipNav from '@ciceksepeti/cui-skip-nav';
import '@ciceksepeti/cui-skip-nav/styles.css';

export const Example = () => {
  return (
    <div>
      <div>
        <SkipNav targetId="target-id">Skip Navigation Example</SkipNav>
        <h2>Navbar</h2>
        <ul>
          <li>
            <a href="#">Link 1</a>
          </li>
          <li>
            <a href="#">Link 2</a>
          </li>
          <li>
            <a href="#">Link 3</a>
          </li>
        </ul>
      </div>

      <h2>Some Content</h2>
      <p>
        Aute esse excepteur velit id nostrud in. Sint culpa eiusmod officia
        labore cillum incididunt id. Occaecat sunt dolore culpa fugiat occaecat
        ex. Aliquip voluptate anim laboris Lorem ex dolor laboris. Qui pariatur
        in pariatur eiusmod id officia non anim tempor aliquip ut ad. Occaecat
        consequat nisi sit officia eu sint cupidatat officia adipisicing
        consectetur. Velit occaecat ullamco ex ullamco non mollit dolor qui
        deserunt anim excepteur aliquip non. Quis in laboris laborum proident
        Lorem irure qui sint eu ullamco.
      </p>
      <h2 id="target-id" className="skipnav-header">
        Target Content
      </h2>
      <p>
        Aute esse excepteur velit id nostrud in. Sint culpa eiusmod officia
        labore cillum incididunt id. Occaecat sunt dolore culpa fugiat occaecat
        ex. Aliquip voluptate anim laboris Lorem ex dolor laboris. Qui pariatur
        in pariatur eiusmod id officia non anim tempor aliquip ut ad. Occaecat
        consequat nisi sit officia eu sint cupidatat officia adipisicing
        consectetur. Velit occaecat ullamco ex ullamco non mollit dolor qui
        deserunt anim excepteur aliquip non. Quis in laboris laborum proident
        Lorem irure qui sint eu ullamco.
      </p>
      <h2>Some Content</h2>
      <p>
        Aute esse excepteur velit id nostrud in. Sint culpa eiusmod officia
        labore cillum incididunt id. Occaecat sunt dolore culpa fugiat occaecat
        ex. Aliquip voluptate anim laboris Lorem ex dolor laboris. Qui pariatur
        in pariatur eiusmod id officia non anim tempor aliquip ut ad. Occaecat
        consequat nisi sit officia eu sint cupidatat officia adipisicing
        consectetur. Velit occaecat ullamco ex ullamco non mollit dolor qui
        deserunt anim excepteur aliquip non. Quis in laboris laborum proident
        Lorem irure qui sint eu ullamco.
      </p>
    </div>
  );
};

PREVIEW

Skip Nav

// Click here then press to 'Tab' button to open skip nav popup.
// Then click 'Skip to Target Content' button to jump to target content.Skip to Target Content

Navbar

• Link 1
• Link 2
• Link 3

---

Some Content

Aute esse excepteur velit id nostrud in. Sint culpa eiusmod officia labore cillum incididunt id. Occaecat sunt dolore culpa fugiat occaecat ex. Aliquip voluptate anim laboris Lorem ex dolor laboris. Qui pariatur in pariatur eiusmod id officia non anim tempor aliquip ut ad. Occaecat consequat nisi sit officia eu sint cupidatat officia adipisicing consectetur. Velit occaecat ullamco ex ullamco non mollit dolor qui deserunt anim excepteur aliquip non. Quis in laboris laborum proident Lorem irure qui sint eu ullamco.

---

Target Content

Aute esse excepteur velit id nostrud in. Sint culpa eiusmod officia labore cillum incididunt id. Occaecat sunt dolore culpa fugiat occaecat ex. Aliquip voluptate anim laboris Lorem ex dolor laboris. Qui pariatur in pariatur eiusmod id officia non anim tempor aliquip ut ad. Occaecat consequat nisi sit officia eu sint cupidatat officia adipisicing consectetur. Velit occaecat ullamco ex ullamco non mollit dolor qui deserunt anim excepteur aliquip non. Quis in laboris laborum proident Lorem irure qui sint eu ullamco.

---

Some Content

Aute esse excepteur velit id nostrud in. Sint culpa eiusmod officia labore cillum incididunt id. Occaecat sunt dolore culpa fugiat occaecat ex. Aliquip voluptate anim laboris Lorem ex dolor laboris. Qui pariatur in pariatur eiusmod id officia non anim tempor aliquip ut ad. Occaecat consequat nisi sit officia eu sint cupidatat officia adipisicing consectetur. Velit occaecat ullamco ex ullamco non mollit dolor qui deserunt anim excepteur aliquip non. Quis in laboris laborum proident Lorem irure qui sint eu ullamco.

Props

Name	Type	Default	Required	Description
targetId	string	-	required	Target id of the element to skip to
as	string	div	-	Changes HTML tag of a portal component which renders to DOM
children	React.Node		required	The element which is going to be rendered inside the Skip Nav component

Styling

Element Selectors

Default Selector Values

Playground

Styling

Element Selector

tip

To learn more about selectors please visit the CSS Selector Reference page.

Name	Type
[data-cui-skip-nav]	Element Selector