Replies: 4 comments 4 replies
-
@adatti This is used as a positioning "track" for CleanShot.2023-01-06.at.12.34.31.mp4We decided that wrapping was acceptable here as you'd typically apply your list positioning to |
Beta Was this translation helpful? Give feedback.
-
This added We don't have the exact same positionning / logic as the default navigation style so we have to add a rule that looks like it : .nav > div {
position: initial !important;
} And it can mess with your style when your nav is in display flex. Even more when you add 2 List as children for instance but then you have a div that actually wraps these children so the styles you add on your nav-list should maybe be on the div position:relative but you have no way to add it in a clean way, sadly. <Root className="nav">
<List className="nav-list">...</List>
<List className="nav-list">...</List>
</Root> It would be nice to not have to style our nav (actually reset Radix styles) using these kind of dangerous / too vague selectors. Why do not add ListRelativeWrapper or I don't know what name/logic it would have so users can manually add it or not? |
Beta Was this translation helpful? Give feedback.
-
Another workaround is to use <Root style="display:grid; width: 100%; height: 100%;">
<List className="nav-list">...</List>
<List className="nav-list">...</List>
</Root> |
Beta Was this translation helpful? Give feedback.
-
Still an issue today. There's no way to opt out of adding this weird div in my markup without applying the suggested CSS hack. Radix is usually very composable, why suddenly deviate from that goal here? |
Beta Was this translation helpful? Give feedback.
-
I just noticed that
NavigationMenu.List
isn't rendered simply as aul
but as adiv style="position:relative"
and aul
inside it. The div seems out of reach, because the attributes I set on theNavigationMenu.List
only apply to theul
. This can be seen by inspecting the element in this sandbox or on the radix navigation menu demo page.Is there a reason for this? I only just noticed this and it kind of breaks my
heartlayout. I can get the div to be ignored by my CSS by addingdisplay: contents
to it, but I have to select it awkwardly with.nav > *:nth-child(2)
(because the div happens to be the second child of the nav).Beta Was this translation helpful? Give feedback.
All reactions