3 things to take care while making multi-level dropdown Menus
Tags: html, javascript, react
Published: 2023-02-15 22:23:38


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.

```javascript
...
<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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j29op3fvn0hyclryspkp.gif)

<br />

## 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*