Skip to main content

Skip Nav

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

installversionusagestyle
yarn add @ciceksepeti/cui-skip-nav1.0.0import {SkipNav} from '@ciceksepeti/cui-skip-nav'import '@ciceksepeti/cui-skip-nav/style.css'

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


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 portal component which renders to DOM

children

React.Node

required

Element which is going to be rendered inside the Skip Nav component

Styling​

Element Selectors​

Default Selector Values​

Playground​

/img/codesandbox-icon
/img/stackblitz-icon