Webstudio
Log in

Join the Webstudio community

Updated 3 weeks ago

Radix duplicate of navigation menu item, how to move that below it's parent?

At a glance

The community member has duplicated a LOCATION and renamed it to INTERIORS, but the Menu Content remains in the same position as the original LOCATION. They are looking for a way to move the Menu Content to the right, below the INTERIORS. Other community members suggest that the Radix library does not have a feature to position the dropdown according to the parent, and provide some workarounds, such as putting dropdowns in the navigation menu and static links outside of it, or making the dropdowns wider so they are at least under the parent. The community member eventually solves the issue by having only the one dropdown in the Navigation Menu and duplicating the entire Navigation Menu, which positions the Menu Content where they need it, although they note that it is not a very clean solution.

Useful resources
RRonald from 360Creators
·
I've duplicated LOCATION, renamed the duplicate to INTERIORS, but the Menu Content stays on the exact same position as the LOCATION. I've been looking around the display settings and positioning, but I'm a little lost. I would like to have it moved to the right below INTERIORS. Anyone any idea why this happens?
Attachment
image.png
2
R
J
M
23 comments
RRonald from 360Creators
Attachment
image.png
JJohn Siciliano
Radix unfortunately does not have a feature to position the dropdown according to the parent. couple things you can do...
RRonald from 360Creators
Ahh okay, so it's not me 😁
JJohn Siciliano
  1. put dropdowns in navigation menu and static links outside of it so the dropdown is centered to all dropdowns and not entire menu
  1. make dropdowns wider so they are at least still under the parent
JJohn Siciliano
heres more info and a feature request i have to somewhat combat it https://github.com/webstudio-is/webstudio/issues/3956
RRonald from 360Creators
Thanks, I'll try now
RRonald from 360Creators
So you would duplicate a dropdown Menu Item and make the Menu Content wider so that it's at least under the parent, even though it's much larger now?
RRonald from 360Creators
And move out the links from the Navigation Menu
RRonald from 360Creators
I think I solved it now by just having only that one single dropdown in the Navigation Menu and duplicating the complete Navigation Menu. Now it actually shows it where it needs to be. Not super clean, but it works.
Attachment
image.png
JJohn Siciliano
ha that works too I guess. nice
MMihu
now Radix has it - https://www.radix-ui.com/primitives/docs/components/navigation-menu . Are there any plans to implement the newest version of Radix primitives to Webstudio builder? or is there a workaround on how to create a custom component and install it individually ?
JJeremy
@Ronald from 360Creators , this will tell screen readers there are two navigation systems, each with it's own list of items. It will work visually, but for other users it would be confusing.
RRonald from 360Creators
I see. How would you do it?
OOleg Isonen
Radix always had this and we have this too
JJeremy
@Ronald from 360Creators, can you dm me. I don't fully understand your issue. After I understand it, I can build a test and then do some accessiblity testing on it.
MMihu
but don't we have like the previous version of Radix primitives? I'm on pro account and I've just created simple nav menu and it dosen't work or look at all like the one from the current documentation.
Menu content doesn't open under the menu trigger and just floats from the left, and there are no animations etc.
https://p-1cb856ca-9c9a-4329-b0cf-3715004c589d.apps.webstudio.is/?authToken=a672771d-0400-4793-9a81-9afabc0d6abe&mode=design
JJohn Siciliano
Open under trigger
Radix doesnt support this. Src: https://github.com/radix-ui/primitives/issues/1462

Animations
  1. Check out the Craft Library for open, close, and moving between menu transitions.
  1. data-motion... I don't have the src available but Radix has a bug with this when using Viewport container IIRC
MMihu
John could you tell more what do you mean by "Check out the Craft Library for open, close, and moving between menu transitions." I'm looking into craft library, but don't know what next.. 😅

So if Radix dosen't support centring under the trigger the best way I suppose is to make the viewport fullwidth and do a menu similar to the nav on https://coda.io/welcome
JJohn Siciliano
There are header/nav sections you can insert and you'll see they are animated. I'd recommend just inserting one and using that and modifying it to your needs.

IT doesnt need to span full viewport. Checkout webstudio's site for an example
MMihu
I've tried and they work exactly like the regular nav radix component but is just styled in a different way so the viewpoint cointainer is center - what animations am I missing?
Here's my sandbox https://p-1cb856ca-9c9a-4329-b0cf-3715004c589d.apps.webstudio.is/?authToken=a672771d-0400-4793-9a81-9afabc0d6abe&mode=design
JJohn Siciliano
there are two animations

  1. in and out
  2. transition between menu sizes
add one from craft lib to see them in action. the first requires custom css which is included in the lib
MMihu
I think now I understand what you mean - I found the Ani Motion Demo page and there is the nav radix component with [data-ani] = zoom added to Menu Viewport + two transitions (width + height) which makes the in and out and transition beetween menu sizes effect 🙂
MMihu
also - we can copy for free a nav component from here https://drevo.digital/library/all-starter-components and the dropdown is below the trigger from the get go 🥳
Add a reply
Sign up and join the conversation on Discord