Menu without focus effects

[FelixZY]

A bit of a special case perhaps but I would like to display a tree view and found menu to have a nice look for this. However, my tree view is non-interactive (I use it do display other components, such as input fields and buttons) and I would like to remove the hover/focus effects.

So feature suggestion: introduce a modified class for menu to disable highlight effects.

Personally, I would have preferred it the other way around - that you would add a class to gain hover/focus effects but I believe that would be too breaking of a change which is why I suggest a class to remove the hover/focus effects instad.

[FelixZY]

Optionally, this could be a new component called e.g. tree

[saadeghi]

You can add inert HTML attribute to any element to make it non-interactive.
example: https://play.tailwindcss.com/v0dv4jRECS

Let me know if you have a question.

[FelixZY]

Cool, I didn't know about inert! However, reading the documentation at MDN, I still have some concerns:

Specifically, inert does the following:
[...]

• Hides the element and its content from assistive technologies by excluding them from the accessibility tree.

When an element is inert, it along with all of the element's descendants, including normally interactive elements such as links, buttons, and form controls are disabled because they cannot receive focus or be clicked.

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert

For my use case, I specifically want to show form controls and buttons in an otherwise non-interactive tree-like view. I also do not wish to hide the content from assistive technologies as the menu/tree layout is the main content of my page.