3 things to take care while making multi-level dropdown Menus

There are various types of menus on the web. For example, Standard Horizontal Menu, Hamburger Menu, Sticky or Fixed Menu etc. Creating inclusive experiences is a question of using the right menu pattern in the right place, with the right markup and behaviour.

Here are 3 things to take care while implementing these types of menus:

1. Focus and hover interactions
2. Mobile and desktop devices compatibility.
3. ARIA semantics intended to help screen reader users.

Focus and Hover Interactions

When it comes to implementing hover interactions with vertical Menubar and then showing up the submenus, it can cause chaos if not handled properly, so better to keep in mind the following things:

• One must use the event-handlers onMouseEnter and onMouseLeave for hover interactions in 'menu-item'.

• We also want our 'menu-item' to be accessible by pressing the TAB key on the keyboard. To do that, we can use tab-index ARIA. We need to specify the unique tabindex value to each 'menu-item'.

Note: Don't use the onMouseOut handler in place of onMouseLeave handler. onMouseOut handler triggers when the mouse pointer moves just out of the inner element. onMouseLeave handler triggers when the mouse pointer moves out of the inner element and its descendant child element also.

...
<ul role="menu-bar">
  {MENU.map((item, index) => (
    <li
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      role="menu-item"
      tabindex={index}
    >
      {item}
    </li>
  ))}
</ul>
...

• When showing the dropdown-menu on hover, make sure that when a user moves the mouse pointer from the hovered 'menu-item' element to the dropdown menu, there should be no gap between it, otherwise, our hovered element should be out of focus which invokes onMouseLeave event, making the dropdown menu disappear before selecting anything.

Touch and desktop devices compatibility

Navigation submenus or dropdown work well with a mouse and keyboard but they’re not so hot when it comes to touch. As a touchscreen user, we can't hover on it, we have to press or click on that menu-item.
There are two possible resolutions here:

• We can make a separate vertical Hamburger Menubar for mobile devices that opens the menu and submenus in vertical order.

• We can make the top-level menu-item hoverable on desktop devices and clickable on mobile devices.

ARIA Semantics

Like semantic HTML, ARIA is a W3 standard that helps make interfaces more accessible to people who use screen readers and other assistive technologies to consume content.
So, let's look into the following steps on how we can apply the ARIA semantics in our menu-bar:

• Assign role='menu-bar' to 'ul' so that screen readers can identify it as a menubar.
• Assign role='menu-item' to each of its 'li' item also.
• Also give a unique tabindex value to each 'li' item to make it accessible with keyboards.

And that's it, these are the least things that we need to think while implementing the multi-level dropdown Menubar or Navbar.

Happy coding for you