Ability to programmatically close menu?

[joshmanders]

The menu tells us if its open or not along with handling closing itself when clicked outside of itself and that's fine and dandy, but how do we programmatically close the menu?

For example, I have this component as a menu, when you open it, you get presented with the form. When you click cancel, I'd like to be able to have a method from <Menu /> that would allow me to close the menu.

[RobinMalfait]

Hey! Thank you for your feature suggestion!
Much appreciated! 🙏

I don't think that this is functionality we want to expose right now. That said, the current Menu component is for a Menu with Menu Items. Think of it as your profile dropdown on GitHub for example.

Your example is not suitable for a Menu, and here are a few reasons why:

• Typically you have a Menu with Menu Items, you can use arrow keys to move around and use space/enter to invoke an item. This item can be a link or a button.
• A Menu also has focus trap, this means that you can't use the Tab key
• The accessibility role of menu doesn't allow intractable contents, this means that keyboard users will not be able to use your component as is.

  A menu is a widget that offers a list of choices to the user, such as a set of actions or functions. Menu widgets behave like native operating system menus, such as the menus that pull down from the menubars commonly found at the top of many desktop application windows. ~ https://www.w3.org/TR/wai-aria-practices-1.2/#menu

The component you are looking for is a Disclosure (https://www.w3.org/TR/wai-aria-practices-1.2/#disclosure), this doesn't exist yet in Headless UI. Because currently the only feature you are using of the Menu is the fact that you can open/close it, and this is exactly what a Disclosure component is about.

[joshmanders]

Thanks for the responses @RobinMalfait!

[pikeas]

@RobinMalfait Does this mean that the Menu component shouldn't / can't be used for a hamburger menu (https://tailwindui.com/components/marketing/elements/headers) with a close button?