Skip Navigation

The <nys-skipnav> is an accessibility feature that allows keyboard and screen readers to bypass navigation items and jump directly to the main content of a webpage.

The skip link is visible here for demo purposes. In a real world mockup below, it appears first in the body tag.

Copy Code
<nys-skipnav id="skipnav-demo" href="#main-content"></nys-skipnav>

Can't use NYS Design System web components in your project? Try using the CSS Variables instead.


Accessibility

The <nys-skipnav> component includes the following accessibility-focused features:

  • First focusable element on page load for easy keyboard navigation

  • Visible only on focus, with a clear focus indicator that meets WCAG 2.2

  • Pressing Enter moves focus to the main content section

  • Screen readers correctly announce the link and shift focus on activation

    Additional accessibility test and build content is coming soon, in a new format.


Options

The <nys-skipnav> component adds a hidden "Skip to main content" link that appears on Tab, allowing keyboard and screen reader users to jump directly to the main content. By default, href is set to href="#main-content", but you can change it to match the id of your main content container.

IMPORTANT: To work correctly, <nys-skipnav> should be the first focusable element. Ideally right after the opening <body> tag, before any headers or nav elements.

Main Content

Press Tab to focus on the hidden "Skip to main content" link. This feature allows screen reader users and keyboard navigators to jump directly to the main content section, improving accessibility and usability.

Copy Code
<body>
  <nys-skipnav href="#main-content1"></nys-skipnav>
  <nys-unavheader hideTranslate hideSearch></nys-unavheader>
  <div id="main-content1" style="padding:10px 30px; background-color: #f0f0f0;">
    <h2>Main Content</h2>
    <p style="display:flex; align-items:top; gap:10px;">
      <nys-icon name="info" size="2xl"></nys-icon>
      Press Tab to focus on the hidden "Skip to main content" link. This feature 
      allows screen reader users and keyboard navigators to jump directly to the 
      main content section, improving accessibility and usability.
    </p>
  </div>
  <nys-unavfooter></nys-unavfooter>
</body>

Usage

Do

  • Use on pages with a large header, navigation, or other repeated content before the main section.
  • Ensure the href on <nys-skipnav> matches the id of the main content container.

Don't

  • Use if your layout already starts with the main content and there is nothing to skip over.
  • Mismatch the href and target id.

Properties

Property Type Default
href String (URL) "#main-content"
id String ""

Style Overrides

There are no existing CSS variables for this component. Explore existing options, or propose a new one with a Component Proposal.


Events

This component does not emit any custom events.

Suggest a New Component

Do you have an idea for a new NYS Design System web component? Look through the existing proposals in our GitHub discussions board to see if someone already proposed something similar. If not, feel free to submit one.

Edit this page on GitHub (Permissions required)

Last updated: July 11, 2026