![]() ![]() By contrast, Menu and Menu.Item do not render anĮlement, and instead render their children directly by default. Rendering a different element for a componentīy default, the Menu and its subcomponents each render a default element that is sensible for that component.įor example, Menu.Button renders a button by default, and Menu.Items If you want to build a dropdown with more flexible content, consider using Popover instead. The accessibility semantics of role="menu" are fairly strict and any children of a Menu that are not Menu.Item components will be automatically hidden from assistive technology to make sure the menu works the way screen reader users expect.įor this reason, rendering any children other than Menu.Item components is discouraged as that content will be inaccessible to people using assistive technology. Props that you can use to conditionally apply different styles or render different content.įor example, the Menu.Item component exposes an active state, which tells you if the item is currently focused via the mouse or keyboard.īecause they're renderless, Headless UI components also compose well with other animation libraries in the React ecosystem like Framer Motion and React Spring. ![]() Using render propsĮach component exposes information about its current state via render Headless UI keeps track of a lot of state about each component, like which listbox option is currently selected, whether a popover is open or closed, or which item in a menu is currently active via the keyboard.īut because the components are headless and completely unstyled out of the box, you can't see this information in your UI until you provide the styles you want for each state yourself. ![]()
0 Comments
Leave a Reply. |