SkipMenu

About

SkipMenu is a drop-down menu containing links to major places on your web page. While helping all users, it is especially helpful to users using a keyboard to navigate the web. Use it as a replacement for traditional 'skip to content' links.

Just add skipMenu's Javascript and CSS files to your webpage. It automatically detects and adds links to all the headings and landmarks on your webpage. Webpage content changes? - no problem. Automatically update the menu by calling the `update` method or use the `reloadOnChange` config setting to automatically detect DOM changes.

Want to use SkipMenu in a React application? See SkipMenu React

How do I add it to my webpage?

The first step is to download the files from the GitHub releases page or use the download link above.

Then add the following to the head section of your HTML file:

          
            <link rel="stylesheet" href="/path-to/skipMenu-full.css" />

            <script src="/path-to/skipMenu.js"> </script>

The next step is to load the skipMenu to your webpage. Put the following at the bottom of the body tag or call it after the DOM is ready.

          
            <script > 

               const skipMenu = new SkipMenu({ useAccessKey: true,
            reloadOnChange: true, attachTo: document.querySelector('header'),
            }); 

                skipMenu.init(); 

            </script>

Configuration

There are numerous configuration settings that support internationalization, determining what headings and landmarks are added to the menu along with many others. See the GitHub repo for configuration options.

Try it out

Tab to the "Skip to content" button on this page and use either the space or enter/return key to open the menu
Use the up and arrow keys to choose an item
Use either the enter/return or space key to go to that item, or the tab key to close the menu.

Manually updating the menu

You can update the menu any time by calling the update() method. Try clicking the button below and notice that the newly added header is added to the menu.

Example code when calling the update method:

          
            document

               .getElementById('newHeaderButton')

               .addEventListener('click', () => {

             document.getElementById('newHeader').innerHTML = '<h2>My
            new header</h2>';

                  skipMenu.update();

               });

Automatically updating menu

If the menu has the `reloadOnChange` configuration set to `true` then the menu will automatically update when the page changes.

Styling

SkipMenu uses standard Bootstrap classes, so it can be easily incorporated into a site that is already using Bootstrap. Otherwise, stylings can be easily over written by using the data attribute attached to the skipMenu wrapper. For example, the following code would move the button to the left part of the screen and turn the button purple.

          
            <style>

               [data-skip-menu] {

                  left: 20px;

                  transform: none;

                }

                [data-skip-menu] button {

                   background-color: rgb(133, 4, 133);

                }

            </style>

Bookmarklet

Install Bookmarklet

Try skipMenu on other webpages right in your browser.