Join the Webstudio community

Updated 3 months ago

Radix Hamburger as Toggle

At a glance

The community members are discussing whether it is possible to use the hamburger icon in the Radix Sheet component as a toggle rather than the dedicated 'close button'. The comments suggest that while it is technically possible, it may not be the recommended approach due to accessibility concerns. Some community members suggest positioning the overlay without covering the hamburger icon, increasing the z-index of the hamburger icon, or rendering a separate hamburger icon on the dialog as a toggle. However, the consensus seems to be that these are not ideal solutions and the recommended approach is not clear from the discussion.

Useful resources
Is it possible to use the hamburger icon in Radix Sheet component as a toggle rather than the dedicated 'close button', If so how would I do this?
O
J
c
15 comments
your question is if the radix hamburger trigger is also closing the sheet overlay? it already does
you just need to position the overlay so that you can actually still reach the hamburger icon
Yeah you can do that. Technically they are two different buttons.

Radix Collapsible is one button
Try to click the hamburger once the menu is open
Also have tried making the z-index of the hamburger 9999
Attachment
Screenshot_2024-11-14_at_2.18.47_am.png
like I said you need to make the button available, you are covering it with the overlay
you would either need to position overlay without covering, or make the hamburger z-index be higher than overlay or just render another hamburger on the dialog instead of close button and treat it like a toggle
the last option is probably the easierst
Yeah, I've tried to make the hamburger z-index 9999 - which didn't work
If i know what properties the close button has or what actually triggers it , i can probably do this in JS but I can't see within the editor what properties the close button has
itsnot as simple, these things are connected with accessibility
So not possible with a checkbox and data variables? 😦
you can hack it together with javascript, but that's not good nor recommended. Recommended approach is above
Add a reply
Sign up and join the conversation on Discord