Styling Radix Nav Menu Items

At a glance

The community member is using the Radix nav menu component, which renders "Menu Items" as list item elements. However, the Webstudio UI does not allow setting styles for hover, focus, etc. on these menu items. The community member asks if there is a way around this or if they need to use an HTML embed.

In the comments, another community member suggests using custom CSS to style the button states and the parent link when the dropdown is open. However, the original poster clarifies that they are not looking to style based on open/closed state, but rather to add pseudo-class styles like hover directly to the li element, which is not possible.

The community members discuss that it is odd not to have these pseudo-class styles available, and explore potential use cases. They conclude that the original poster was able to work around this by styling the link element inside the list item, but acknowledge that being able to style the list item itself could be useful in some cases.

Useful resources

ppaulrudy

The Radix nav menu component includes "Menu Items" which render as list item elements. But the Webstudio UI doesn't allow setting styles for hover, focus etc on these menu items. Is there any way around this, or do I have to use an HTML embed?

7 comments

JJohn Siciliano

You can get most of the way there with the state on the button. For setting styles when the dropdown is open on the parent link follow this issue. I added custom css you can use in the meantime https://github.com/webstudio-is/webstudio/issues/3955

Attachment

ppaulrudy

Thanks for the reply. This seems like a useful github issue and css example, but in this case, I wasn't looking to style anything based on open/closed state of a menu item, but simply to add pseudo-class hover, etc styles to the <li> element. Those pseudo-classes aren't available:

Attachment

Screenshot_2024-09-07_at_10.18.58_PM.png

ppaulrudy

I was able to work around this by styling the states of the link element inside the list item, but for some other cases, it might be useful to be able to style the state of the list item itself

JJohn Siciliano

I do agree it's odd not to have them there. Maybe it was an oversight, but also curious what the use case is? Shouldn't any interaction styles be on the link itself?

ppaulrudy

In this case it was about hover css transition animations on nav elements, and my wanting to interact with the li was a leftover in my brain from some problem I ran into (or misunderstood) back in css2 🙃. Still, I'm sure somebody could come up with a valid use case

JJohn Siciliano

In this case, it might have prevented you from providing the user with the wrong visual queue. If the LI shows hover, but has padding, it might be the user is only hovering over the LI and not the trigger

ppaulrudy

Yeah, you're exactly right. Somehow that got encoded in my brain as "always try to also add hover to the li" but in this case, I just made sure the link fills its li container

Add a reply

Join the Webstudio community

Styling Radix Nav Menu Items