Skip to Main Nav Link [Snippet] <> No-Code Supply Co.
Code
Snippet
/ 

Skip to Main Nav Link

View 
 
Snippet
*
 ↗
View 
Snippet
 ↗
Skip to Main Nav Link
window.addEventListener("DOMContentLoaded", (event) => {
let skipLinkEle = document.getElementById("skip-link");
if (!skipLinkEle) {
return;
}
skipLinkEle.addEventListener("click keydown", function (e) {
if (e.type === "keydown" && e.which !== 13) {
return;
}
e.preventDefault();
var target = document.getElementById("main");
target.setAttribute("tabindex", "-1");
target.focus();
});
});
view raw skip-nav.js hosted with ❤ by GitHub

A function that can be used with a skip to main button in your navigation. The skip button should only be visible on focus and enables keyboard only users to jump past a lengthy nav of links directly to the main content.

Tags

Accessibility
Extending
Javascript
Custom Code

Creators

Corey Moen

Share this item

Twitter
Facebook
LinkedIn

Have feedback or a question related to this item? Drop us some feedback!

Curated: 
6.14.23

Similar items

Items
52
Layout
Grid View
Row View
Bleibtgleich
Inspo
Website
/ 

Bleibtgleich

2.24.25
Creative, Personal, Portfolio, Webflow, GSAP
Form Connector Webflow App
Tools
Utility
/ 

Form Connector Webflow App

2.24.25
No-code, Dev Tools, Forms, Automation, Webflow, Notion, Google Sheets
Print for Figma plugin
Tools
Utility
/ 

Print for Figma plugin

2.24.25
Creative, Print, Workflow, Figma
Tripletta
Inspo
Website
/ 

Tripletta

2.24.25
Food & Beverage, Landing, Scrollytelling, Webflow, GSAP
Making Software
Learn
Article
/ 

Making Software

2.24.25
Dev Tools, SAAS, Workflow
Memberstack
Tools
App
/ 

Memberstack

12.3.19
No-code, SAAS, Authentication, Memberships, Extending, Backend, Custom Code, Webflow
Instant
Tools
App
/ 
Website

Instant

2.21.25
SAAS, Dev Tools, No-code, Ecommerce, Website Builder, Shopify, Framer
Documenso
Tools
App
/ 
Website

Documenso

2.21.25
SAAS, Legal, Marketing, Javascript, API, Framer
Elita Genetics
Inspo
Website
/ 

Elita Genetics

2.21.25
Pets, Medical, Science, Marketing, Webflow
Community Equity Offering by Clay
Inspo
Website
/ 

Community Equity Offering by Clay

2.21.25
SAAS, Financial, Landing, Scrollytelling, Webflow
También Studio
Inspo
Website
/ 

También Studio

2.20.25
Creative, No-code, Agency, Portfolio, Webflow, GSAP, También Studio
Liquid Metal Paper
Code
Library
/ 

Liquid Metal Paper

2.20.25
Dev Tools, Animation, Javascript
Roadway
Tools
App
/ 
Website

Roadway

2.20.25
SAAS, AI, Marketing, Analytics, Charts, Webflow
Greaterthan
Inspo
Website
/ 

Greaterthan

2.20.25
Creative, Sustainability, Environment, Agency, Portfolio, Webflow, GSAP
Elementor
Tools
App
/ 

Elementor

2.20.25
No-code, AI, Website Builder
System Of A Down
Inspo
Website
/ 

System Of A Down

2.19.25
Music, Landing, Webflow
Eco
Inspo
Website
/ 

Eco

2.19.25
Crypto, Dev Tools, Landing, Scrollytelling, Webflow, Benten Woodring, Devin Fountain
Zyphra
Code
Library
/ 

Zyphra

2.18.25
AI, Audio, Automation, Workflow
ImageFX
Tools
App
/ 

ImageFX

2.18.25
AI, Creative, Assets, Workflow
Midlife Engineering
Inspo
Website
/ 

Midlife Engineering

2.18.25
Creative, Technology, Audio, Landing, Framer
Milhoan Design
Inspo
Website
/ 

Milhoan Design

2.18.25
Creative, No-code, Personal, Portfolio, Webflow
Dylan Brouwer
Inspo
Website
/ 

Dylan Brouwer

2.17.25
Creative, Personal, Portfolio, Webflow
Byooooob
Inspo
Website
/ 

Byooooob

2.16.25
Creative, HR, Landing, Webflow
Softgen
Tools
App
/ 

Softgen

2.15.25
AI, Dev Tools, Web Apps, Website Builder
Loti
Inspo
Website
/ 

Loti

2.15.25
Security, SAAS, AI, Landing, Webflow
WeWeb 3.0
Learn
Video
/ 

WeWeb 3.0

2.15.25
No-code, Dev Tools, AI, Web Apps, Website Builder, Weweb
Load more

Bummer, no results

Try a different search/filter combo, or drop us some feedback if there is something missing you would love to see!

Reset filters

Subscribe for updates

Get updates on the latest curated resources and be the first to hear of new features.