Inline menu, e.g for sidebar navigation?

[theo-staizen]

Hi all,

I was wondering if its possible to use the Menu component in an inline manner or it only as a dropdown?

I see this same problem with Radix UI as well, where all their menu components are tightly coupled with the positioning (i.e dropdown) but there is no reason why we can't just render a Menu wherever we want. I even asked a question, but it was just brushed off as "not something we support right now".

So in search for alternatives, I came across this lovely library and I was wondering if it can help with this use case :)

[diegohaz]

The MenuList component is used by Menu under the hood. However, I wouldn't recommend using it to render inline menus unless you have a solid understanding of what the menu role represents. Otherwise, you might end up with a UI that's less accessible than if you didn't use any component library.

If you're unsure, I'm happy to offer a better suggestion if you provide more details about your design (screenshots help).

[theo-staizen]

Thanks for your reply. Taking a quick glance, I believe MenuList might actually be the primitive that fits my needs.

However, I wouldn't recommend using it to render inline menus unless you have a solid understanding of what the menu role represents. Otherwise, you might end up with a UI that's less accessible than if you didn't use any component library.

You are probably right on that not all use cases I have in mind may be the same. For example is a navigation menu with links, the same as a dropdown menu with actions? They are both a list of items (ul>li) but then we use anchors for one scenario and buttons for the others. There's also probably a difference in interaction, e.g tab vs arrow navigation (composite?). Not sure if there is anything else that is different in terms of accessibility (e.g do we also need different roles for each scenario?).

But to answer your question, our use case is to build a menu component, with common features like, items, submenus, separators, groups, etc that is reusable and can serve as the basis for other more distinct components (e.g NavMenu, Dropdown, Select).

For example, all 4 of the menus in this design (3 nav and 1 dropdown) are use the same styling when it comes to the menu list, items etc, but as you can see they are placed in different positions depending

[diegohaz]

If you use MenuList and MenuItem to build navigation menus, it will potentially make them less accessible, particularly since menu items aren't tabbable. There's a tabbable prop, but it should be used carefully (see the docs for more details).

is a navigation menu with links, the same as a dropdown menu with actions?

There are exceptions, but they're not semantically identical. A navigation menu is typically enclosed in <nav>, representing the navigation role. This helps assistive technology users to easily find this section when they navigate through landmarks. While a dropdown menu might include links, it usually doesn't serve as a landmark like navigation does.

I recommend you to use Menu and MenuItem on the dropdown menu and just regular tabbable links on the navigation menus (maybe leveraging Disclosure for the expandable sections). When the navigation menu is displayed in a dialog or popover, use Dialog and Popover components accordingly.

If your dropdown menu item navigates to a different page, use composition to render them as links:

<MenuItem render={<Link href="/orders" />}>
  My orders
</MenuItem>

You can also dynamically render menu items based on the context in which they're rendered:

function MaybeMenuItem() {
  const menu = Ariakit.useMenuContext();
  
  const link = <Link href="/orders">My Orders</Link>;
  
  // If it's rendered in a dropdown menu, render MenuItem
  if (menu) {
    return <Ariakit.MenuItem render={link} />;
  }
  
  // Otherwise, just render the tabbable link
  return link;
}

[theo-staizen]

Are you saying that I should not try to do something like this?

<nav>
  <MenuList composite={false}>
    <MenuItem tabbable={false} render={<a href="..."></a>}>
  </MenuList>
</nav>

[diegohaz]

As I mentioned, you can follow that path if you have a solid grasp of the ARIA spec surrounding it and test it with screen readers (or if you just want to learn). Ariakit has this flexibility. Otherwise, I wouldn't recommend it. There's a significant likelihood that your UI would be less accessible than if you didn't use any ARIA at all. No ARIA is better than Bad ARIA.