Best way to build a basic responsive main navigation (a few section with a few items) ? #2126
Replies: 2 comments 1 reply
-
Hey @SebastienD11, I believe for our WorkOS docs on mobile we use a |
Beta Was this translation helpful? Give feedback.
-
As @benoitgrelard mentioned, we ourselves used a Dialog in combination with the Navigation Menu in the WorkOS docs. WorkOS docs navigation is a little complex design-wise, so we had to reuse many components between the full-size and the mobile versions, but otherwise it was a normal dialog when it comes styling. The Dialog is used for the focus trapping, and a simple Navigation Menu just with Root, List, Item and Link parts provides the correct semantics and the arrow key support—and it doesn't have to use Trigger, Content, or Sub parts if you don't need them. |
Beta Was this translation helpful? Give feedback.
-
Hi !
Today, what would be the best way to build a basic hamburger responsive main navigation ?
The question is quite close to this one #796, but I won't talk only about the Dropdown, so I created a new discussion (if that's ok...)
There is already a bunch of post about the Dropdown Menu not being really made for responsive.
You cannot make the wrapper act as an off canvas, drawer, or a full-screen modal.
It is suggested here to use the Dialog component and make it behave as we want.
Ok for this part. Easy to make the dialog open and take the full screen.
My concern now if about the content of this Dialog.
If i want to create a basic vertical menu (a few section and a few link items):
Looking at the available primitives for a Menu we have 3 choices :
Dropdown Menu (uncontrolled and open by default)
This one is interesting as it comes with a lot of use case for a responsive main navigation: group, separator, label, links, keyboard up/down navigation), loop, etc.
The drawback is that even with the openDefault={true}, and by removing the portal the positioning of its content it's still relative
data-radix-popper-content-wrapper
which come with fixed position and transform style . We cannot really use this within our Dialog, right?Navigation Menu
At first I though this one was the right one. But here again, we have a few drawback.
It seems to really focus on a desktop main navigation, with popover sub menu, trigger on main element, no separator, etc.
So here as well, i can't see using this one as it's missing items (mostly the "group" concept and separator) ?
Unless maybe mixing primitives and custom html? I don't know if that's ok ? But it'd feel less complete compare to what offers the dropdown's one.
By hand
Building a menu by hand is not that hard when it come to add all aria attribute, but with this method, we're lacking keyboard navigation and can only use tab to switch between links, unless redoing a lot of stuff that is prevent in various primitives in Radix.
I am a little lost on how to achieve what feels a basic need here ?
Thank you :)
Beta Was this translation helpful? Give feedback.
All reactions