Accessible Dropdown Nav With Vanilla JavaScript – Clicky Menus

Clicky Menus is a fast, responsive, progressive enhancement, touch support, fully accessible dropdown menu for the web.

Features:

• Converts the dropdown into an accordion menu in mobile view.
• Automatically prevents offscreen submenu.
• Navigates between menu items with Tab.
• Allows to sub-menus with click, touch tap, and Enter/Space key.
• Allows to close sub-menus with ESC key.

How to use it:

1. Import the Clicky Menus into the HTML.

<link rel="stylesheet" href="./clicky-menus.css" />
<script src="./clicky-menus.js"></script>

2. Create a dropdown menu from a nested nav list as follows. That’s it.

<!-- for use with <use> -->
<svg xmlns="http://www.w3.org/2000/svg"  hidden>
  <symbol id="arrow" viewbox="0 0 16 16" >
    <polyline points="4 6, 8 10, 12 6" stroke="#000" stroke-width="2" fill="transparent" stroke-linecap="round" />
  </symbol>
</svg>
<!-- In the real world, all hrefs would have go to real, unique URLs, not a "#" -->
<nav id="site-navigation" class="site-navigation" aria-label="Clickable Menu Demonstration">
  <ul class="main-menu clicky-menu no-js">
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">
        Category
        <svg aria-hidden="true" width="16" height="16">
          <use xlink:href="#arrow" />
        </svg>
      </a>
      <ul>
        <li><a href="#">Accordion</a></li>
        <li><a href="#">Carousel</a></li>
        <li><a href="#">Dropdown</a></li>
        <li><a href="#">Menu</a></li>
        <li><a href="#">Navigation</a></li>
      </ul>
    </li>
    <li>
      <a href="#">
        Social
        <svg aria-hidden="true" width="16" height="16">
          <use xlink:href="#arrow" />
        </svg>
      </a>
      <ul>
        <li><a href="#">Facebook</a></li>
        <li><a href="#">Twitter</a></li>
        <li><a href="#">Linkedin</a></li>
        <li><a href="#">Instagram</a></li>
      </ul>
    </li>
    <li>
      <a href="#">
        About
        <svg aria-hidden="true" width="16" height="16">
          <use xlink:href="#arrow" />
        </svg>
      </a>
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Policy</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </li>
  </ul>
</nav>

3. Enable an element to close the opened submenu.

<button data-clicky-menus-close="my-menu">Close Open Submenus</button>

Changelog:

v1.3.0 (04/26/2025)

• Use the data-clicky-menus-close attribute on any element to automatically close the open submenu. It should be set to the ID of the element with the clicky-menu class.
• Don’t let ESC propogate when pressed on an item inside a submenu. This should generally prevent dialogs and other toggle features from closing when they contain a menu.
• Strip special characters from automatically generated submenu IDs and add an increment (e.g. -1) to the end of each ID to get much closer to guaranteeing it is unique.

v1.2.0 (05/22/2024)

• Programmatically close menus with 3rd-party scripts
• Minor CSS improvement to make things more likely to work out of the box

11/08/2022

• Add iterator to menu init. Use iterator to give menu parent a unique ID if it doesn’t have one and fix bug where submenus toggle for all items where the parent item has the same text

The post Accessible Dropdown Nav With Vanilla JavaScript – Clicky Menus appeared first on CSS Script.