Why is <NavigationMenu.List> wrapped in a div with relative positioning?

[adatti]

I just noticed that NavigationMenu.List isn't rendered simply as a ul but as a div style="position:relative" and a ul inside it. The div seems out of reach, because the attributes I set on the NavigationMenu.List only apply to the ul. 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 heart layout. I can get the div to be ignored by my CSS by adding display: 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).

[andy-hook]

@adatti This is used as a positioning "track" for NavigationMenu.Arrow.

CleanShot.2023-01-06.at.12.34.31.mp4

We decided that wrapping was acceptable here as you'd typically apply your list positioning to Root as this directly wraps the list. The only time I think this wouldn't be the case is when you're trying to nest other elements next to List within Root, is that the case for you? do you have an example of your usage?

[deltasierra96]

@adatti This is used as a positioning "track" for NavigationMenu.Arrow.

CleanShot.2023-01-06.at.12.34.31.mp4
We decided that wrapping was acceptable here as you'd typically apply your list positioning to Root as this directly wraps the list. The only time I think this wouldn't be the case is when you're trying to nest other elements next to List within Root, is that the case for you? do you have an example of your usage?

I have an example that I believe what @adatti is having.

With the orientation of the sub menu set to vertical, the NavigationMenu.Trigger has its height calculated and applied to the NavigationMenu.Indicator just fine. However if I wanted to set the width of it to be full width of the tab control grid column, it overflows.

<NavigationMenu.Sub orientation="vertical" defaultValue="sub1">
  {/* NavigationMenu.List */}
  <NavigationMenu.List>
    <div className="grid grid-flow-col grid-cols-12 gap-2">
      {/* Tab column */}
      <div className="col-span-3 relative">
        {/* Item */}
        <NavigationMenu.Item value="sub1">
          <NavigationMenu.Trigger className="w-full p-4 rounded-md ">
            <span className="block font-medium">Sub Item One</span>
            <p className="text-sm">
              Accept payments online, in person, or through your platform.
            </p>
          </NavigationMenu.Trigger>
          <NavigationMenu.Content
            className={clsx(
              "absolute inset-x-0 w-full",
              "radix-content",
              "radix-motion-from-start:animate-enter-from-top",
              "radix-motion-from-end:animate-enter-from-bottom",
              "radix-motion-to-start:animate-exit-to-top",
              "radix-motion-to-end:animate-exit-to-bottom"
            )}
          >
            <div className="w-full p-3 ">
              <div className="grid grid-cols-6 gap-4">
                <div className="w-full col-span-2 p-4 bg-gray-100 rounded-md dark:bg-gray-900"></div>

                <div className="flex flex-col w-full col-span-4 p-4 space-y-3 bg-gray-100 rounded-md dark:bg-gray-900">
                  <div className="w-full h-12 bg-white rounded-md dark:bg-gray-700"></div>
                  <div className="w-full h-12 bg-white rounded-md dark:bg-gray-700"></div>
                  <div className="w-full h-12 bg-white rounded-md dark:bg-gray-700"></div>
                  <div className="w-full h-12 bg-white rounded-md dark:bg-gray-700"></div>
                </div>
              </div>
            </div>
          </NavigationMenu.Content>
        </NavigationMenu.Item>
        {/* Item */}
        <NavigationMenu.Item value="sub2">
          <NavigationMenu.Trigger className="w-full p-4 rounded-md ">
            <span className="block font-medium">Sub Item Two</span>
            <p className="text-sm">
              Accept payments online, in person, or through your platform.
            </p>
          </NavigationMenu.Trigger>
          <NavigationMenu.Content
            className={clsx(
              "absolute inset-x-0 w-full",
              "radix-content",
              "radix-motion-from-start:animate-enter-from-top",
              "radix-motion-from-end:animate-enter-from-bottom",
              "radix-motion-to-start:animate-exit-to-top",
              "radix-motion-to-end:animate-exit-to-bottom"
            )}
          >
            <div className="w-full p-3 ">
              <div className="grid grid-cols-6 gap-4">
                <div className="w-full col-span-2 p-4 bg-gray-100 rounded-md dark:bg-gray-900"></div>

                <div className="flex flex-col w-full col-span-4 p-4 space-y-3 bg-gray-100 rounded-md dark:bg-gray-900">
                  <div className="w-full h-12 bg-white rounded-md dark:bg-gray-700"></div>
                  <div className="w-full h-12 bg-white rounded-md dark:bg-gray-700"></div>
                  <div className="w-full h-12 bg-white rounded-md dark:bg-gray-700"></div>
                  <div className="w-full h-12 bg-white rounded-md dark:bg-gray-700"></div>
                </div>
              </div>
            </div>
          </NavigationMenu.Content>
        </NavigationMenu.Item>
        {/* Indicator */}
        <NavigationMenu.Indicator className="w-full bg-white rounded-md will-change-[transform,height]" />
      </div>
      {/* Viewport column */}
      <NavigationMenu.Viewport className="relative col-span-9 overflow-hidden ease-easy-it-goes duration-200 will-change-[transform,_width,_height] bg-white h-radix-navigation-menu-viewport" />
    </div>
  </NavigationMenu.List>
</NavigationMenu.Sub>;

Could we ultimately not allow the NavigationMenu.Indicator to be played anywhere within the NavigationMenu.List component and handle our own relative positioning?

[heymath]

This added div with a position: relative; is messing with our nav styles.

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?
Because from issues opened about NavigationMenu, it looks like some people do not want this default behavior.

[minhwpm]

I agree, the <NavigationMenu.List> should not have that relative positioning.
It mess up the styling flexibility which is the most valuable of Radix UI.

[Balros]

Another workaround is to use display: grid; width: 100%; height: 100%; in parent Root element.

<Root style="display:grid; width: 100%; height: 100%;">
    <List className="nav-list">...</List>
    <List className="nav-list">...</List>
</Root>

[sleeyax]

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?

[SalahAdDin]

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?

Which CSS hack?

[sleeyax]

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?

Which CSS hack?

display: contents; as suggested in the top post.

Sure, maybe calling it a hack is a bit of a reach but it's certainly not a clean solution. The div just shouldn't be there when I don't need it to.

[berkerdemirer]

So, if i want to have justify between inside the list, I can't because i can't set the list width to be 100% as I can't target that.

[SalahAdDin]

So, if i want to have justify between inside the list, I can't because i can't set the list width to be 100% as I can't target that.

It seems to be like that.

[berkerdemirer]

Quite limiting tbh

[alex-r89]

Just spent 2 hours trying to work out where this div was coming from and how to remove/edit it. Shame that I need to add hacky CSS to remove the styling

[SalahAdDin]

could you share yours olution?

[AanshKot]

I had the same problem, fixed it using the styling hack they mentioned, added it to my globals.css. nav > div:first-child { display: contents }

[codePassion-dot]

I still don't understand why a "headless" library is adding styles because that would potentially be the avg behavior. From what I understand headless library should only provide functionality and accessibility nothing related to styles.

[codePassion-dot]

headless library should not think about typical behavior for styles, who cares ? let the consumer style it however they need/want

[PAXANDDOS]

This issue is 2 years old now?! I'm glad I found a workaround here because I was about to lose my mind. Imagine spending 2 hours trying to apply "ml-auto" to a single element of the list

[legnaib]

Similar for me, just tried to add "justify-between" which was not working until finding this odd div. Annoying that this is unnecessarily added

[ricalla]

Still there