Shadow in new Catalyst template

[shavonn]

What Template

• Template demo: https://catalyst.tailwindui.com/demos/stacked
• Component name: NavbarItem

Describe the bug A shadow appears on the TeamDropdown when the first menu item has the current page default styling.

To Reproduce Steps to reproduce the behavior:

1. Go to the first NavbarItem link
2. Click on the Team Dropdown (Tailwind Labs on this page)
3. See the shadow in the upper right corner

Expected behavior I would expect it to appear as it does when any other NavbarItem is current. There is no shadow there.

Screenshots

First item current, shadow showing on dropdown

Second item current, no shadow showing on dropdown

Browser/Device (if applicable)

• OS: macOS
• Browser Chrome
• Version 125.0.6422.114

It doesn't look as noticeable in the screenshot as it does when I see it live. 😂

[RobinMalfait]

Hey!

This is done on purpose, the dropdown has a background with an opacity and with a backdrop blur present such that you can see that something is behind it. The little shadow you see is coming from the underline that is seen on the Home tab. When the Events tab is active, then you don't see it because the black underline is not directly underneath the dropdown.

If you don't like this behavior, then you can update the DropdownMenu component to get rid of it:

  // Popover background
- 'bg-white/75 backdrop-blur-xl dark:bg-zinc-800/75',
+ 'bg-white dark:bg-zinc-800',

The result looks like this:

Hope this helps!