Navigation Menu Component -- Shadow Cannot be Applied

[ktalap]

The link to the component: https://www.radix-ui.com/primitives/docs/components/navigation-menu

My navigation item:

<NavigationMenu.Item>
          <NavigationMenu.Trigger className="text-slate11 hover:bg-violet3 focus:shadow-violet7 group flex select-none items-center justify-between gap-[2px] rounded-[4px] px-3 py-2 text-[15px] font-medium leading-none outline-none focus:shadow-[0_0_0_2px] mx-1">
            Main{" "}
            <CaretDownIcon
              className="text-violet10 relative top-[1px] transition-transform duration-[250] ease-in group-data-[state=open]:-rotate-180"
              aria-hidden
            />
          </NavigationMenu.Trigger>
          <NavigationMenu.Content className="data-[motion=from-start]:animate-enterFromLeft data-[motion=from-end]:animate-enterFromRight data-[motion=to-start]:animate-exitToLeft data-[motion=to-end]:animate-exitToRight absolute top-0 left-0 w-full sm:w-auto">
              <ul className="one m-0 grid list-none gap-x-[10px] p-[22px] sm:w-[500px] sm:grid-cols-[0.75fr_1fr]">
                <li className="row-span-3 grid">
                  <NavigationMenu.Link asChild>
                    <a
                      className="focus:shadow-violet7 from-purple9 to-indigo9 flex
                      h-full w-full select-none flex-col justify-end rounded-[6px] bg-gradient-to-b p-[25px] no-underline outline-none focus:shadow-[0_0_0_2px]"
                      href="/mission-statement"
                    >
                      <span>My Logo Here</span>
                      <div className="mt-4 mb-[7px] text-[18px] font-medium leading-[1.2] text-mauve4">
                        Mission Statement
                      </div>
                      <p className="text-mauve4 text-[14px] leading-[1.3]">
                        Simple, to the point statement of why.
                      </p>
                    </a>
                  </NavigationMenu.Link>
                </li>

                <ListItem href="/" title="Contact Me">
                  Don't hesitate to reach out. I like them emails.
                </ListItem>
                <ListItem href="/" title="Changelog">
                  Improvements and milestones to be achieved. Updated weekly.
                </ListItem>
                <ListItem href="/" title="Blog">
                  Updates and announcements of the D8D, tutorials etc.
                </ListItem>
              </ul>
          </NavigationMenu.Content>
        </NavigationMenu.Item>

Tried my best to apply it to the NavigationMenu.Content but it just ain't working. Thank you in advance.

[ktalap]

So the problem was that the window that pops up is actually a viewport that gets defined below via NavigationMenu.Viewport. Apply the shadow to it and it works great.