skippy-links
Advanced tools
A small and easy to use web component to provide dynamic skip links to any page
<skippy-links> is a small and easy to use web component to provide dynamic skip links to any page, thus improving the website's accessibility
Read the official docs here.
Assistive technology users often have to tab through a long navigation until they get to the main content. This can be confusing and take a lot of time and energy.
Skip links are links that are placed before any other content and provide a way for assistive technology users to jump to the most important sections of the page, like for instance the main content, or even jump directly to a search input on the page.
Skip links seem like a minor improvement to the page, but they can make a huge difference for assistive technology users!
Using the skippy-links is quite easy.
You just need to:
<skippy-links></skip-links> to the page,skippy-links-label="..." to any element you want to show on the skip links.npm i skippy-links
<script src="node_modules/skippy-links/dist/skippy-links.js" type="module"></script>
The skippy-links element should be the first element on the body section of the page
<body>
<skippy-links></skippy-links>
<!-- Add your content after the <skip-links> element -->
</body>
skippy-links-label attributeYou define which elements on the page you want to show on the skip links by giving them the skippy-links-label attribute.
For instance if you want to add a link to the <main> section with the "Main Content" label:
<main id="main" skippy-links-label="Main Content">
<!-- your main content -->
</main>
Make sure the element also has an id!
You can style the <skippy-links> element like any other element on your page.
The links inside it are on the shadow dom, so you can't style them directly, but you can use the following CSS variables:
| Variable | default value |
|---|---|
| --sl-color-primary | #0000ee |
| --sl-element-height | 4rem |
| --sl-link-position | absolute |
| --sl-link-top | 0 |
| --sl-link-bottom | 0 |
| --sl-link-left | 0 |
| --sl-link-right | 0 |
| --sl-link-width | 100% |
| --sl-link-height | var(--sl-element-height) |
| --sl-link-display | flex |
| --sl-link-align-items | center |
| --sl-link-justify-content | center |
| --sl-link-color | var(--sl-color-primary) |
| --sl-link-color-focus | var(--sl-color-primary) |
| --sl-link-color-hover | var(--sl-color-primary) |
| --sl-link-font-size | 1rem |
| --sl-link-text-decoration | underline |
| --sl-link-padding | 1rem |
| --sl-link-opacity | 1 |
| --sl-link-opacity-focus | 1 |
| --sl-link-opacity-hover | 1 |
| --sl-link-transform | translateY(-100%) |
| --sl-link-transform-focus | translateY(0) |
| --sl-link-transform-hover | translateY(0) |
| --sl-link-box-sizing | border-box |
| --sl-link-transition-speed | .25s |
| --sl-link-transition-speed-reduced-motion | 0 |
Example:
skippy-links {
--sl-color-primary: red;
--sl-link-opacity: .5;
}
If you find any bugs or have any ideas on how to improve this component, please let us know at the skippy-links github
FAQs
A small and easy to use web component to provide dynamic skip links to any page
The npm package skippy-links receives a total of 1 weekly downloads. As such, skippy-links popularity was classified as not popular.
We found that skippy-links demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
The Socket Research Team has discovered six new malicious npm packages linked to North Korea’s Lazarus Group, designed to steal credentials and deploy backdoors.
Security News
Socket CEO Feross Aboukhadijeh discusses the open web, open source security, and how Socket tackles software supply chain attacks on The Pair Program podcast.
Security News
Opengrep continues building momentum with the alpha release of its Playground tool, demonstrating the project's rapid evolution just two months after its initial launch.