Skip to content

Menu

A menu is a small overlay that uses the popover component to display actionable menu items. It appears over all other elements on a page and can be triggered by a button or icon button. Menus work well when there is limited space and help organize related actions or items.

Overview image

Menu items are the components that make up the menu component. There are many ways to configure the items and the menu to suit the needs of an application.

Default, hover, press, focus, and disabled

States image

Menu and sub-menu items have numerous options available to configure the menu according based on the use case.

Options image

A menu should always appear very close to the trigger element when opened. Depending on where the trigger element is located, the menu may appear above, below, or next to the element.

Placement image

The width of the menu can either match the trigger element or hug the content of the menu depending on the use case.

Width image

If the menu has many options making the container tall or overwhelming, it is recommended to allow the menu to scroll.

Scroll image