Inline menu, e.g for sidebar navigation? #3606
-
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 :) |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 2 replies
-
The If you're unsure, I'm happy to offer a better suggestion if you provide more details about your design (screenshots help). |
Beta Was this translation helpful? Give feedback.
-
Thanks for your reply. Taking a quick glance, I believe MenuList might actually be the primitive that fits my needs.
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 |
Beta Was this translation helpful? Give feedback.
-
Are you saying that I should not try to do something like this?
|
Beta Was this translation helpful? Give feedback.
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.