The Menu component is a list of actions or choices that renders vertically and is styled to look like a classic dropdown menu. Menus within the Cosmos design system are typically opened from a MenuButton.

For more information on how to use the features and props for this component, check out the developer documentation.

Menus are primarily composed of items that are built on top of SummaryItems. This means that each item in a Menu can accept props such as primary and secondary text, as well as a visual region. The secondary prop for Menu items should be provided as an array of text. This will render a MetaList below the primary text. They may also be configured to display a count or tooltip containing more relevant information about the item. Items may be given an href and/or an onClick handler as well as an onExpand handler in the event of the item triggering a new Menu to open. Individual items may also be set as disabled.

The Menu component is capable of rendering items in a defined hierarchy. Each item can itself have a list of items, as well as a list of ancestors. This nesting capability allows for several layers of Menus to be composed within one singular Menu, with the proper navigation between the hierarchy being managed by the component.

Menus can be used in one of two variants: drill-down and flyout. The drill-down variant will utilize the same UI space for all nested Menus, replacing each Menu when a new one is opened. The flyout variant will preserve the visual state of all Menus. As items with children are opened, the new Menus will render within Popovers next to the triggering item.

The Menu component also supports different modes. The default mode is action. Each leaf item should have an associated onClick or href prop that will be triggered when a user clicks on it. The single-select mode allows a user to select one item from a Menu at a time. The multi-select mode allows a user to select multiple items. For both single-select and multi-select modes, you should indicate items that have been chosen with the selected prop on each item.

There are several other features that the Menu component supports including loading states, lazy loading, accent highlighting, and more. Check out all of he available props for this component in the props table below.