Active not active menu items

[jamesladd]

Really liking the pure html and css approach of DaisyUI

I know I can set an active class 'menu-active' on a menu to make it show as active / selected.

what I'm wondering is how to achieve this without javascript ?

ideally, how to set the class and also how to remove it from all other menu items when a new one is selected.

[saadeghi]

Are the links? Is it a multi-page app?
if so, you can compare the URL of the link with the URL of the current page and add menu-active in backend.
You can do the same with almost any framework, either on backend of front-end.

[jamesladd]

Not links. A dropdown menu of options.
When a user chooses an option I want to show the selected item as selected (menu-active)

When the use opens the dropdown again I want the selected item to show as selected.

Think of a side nav where you select an option, then the content changes.
If the side nav doesn't show the selected option in a different style (menu-active) then it is hard for the user to know
which item the selected.

I hope that is more clear.

[saadeghi]

So what happens when a menu item is choses? Do you change the content using JS?
If so, also add the menu-active using JS 🤔

[jamesladd]

I can use JS for sure, just wondered if there was a pure CSS way to achieve this that I was not aware of but you might be
because you know your CSS well.

[pdanpdan]

You can do something like thsi: https://play.tailwindcss.com/Tgcwfl2nyf?file=css
But I think the practical utility is low.

[saadeghi]

So what happens when a menu item is choses?

I'm still not sure what is supposed to happen with the content when an item is chosen,
But I think if the content if changing with JS, that is the one single event you should rely on for changing the menu color as well.

If they work independently (one with JS, the other with CSS) it's not a good idea.
JS might have delay, but CSS will work immediately which will lead to a bad UX (the menu item will be active but the content is still old)