Component for building a menu.

The <Menu> component allows you to define a menu element. It's useful when you want a list with options or actions.

It is structured in two parts <Menu> and <Menu.Item>. The <Menu> now contains the trigger and the button per default. You also can use the <Menu.Section> which you can use to separate the menu items from each other.

If you want create a variant, you can style different parts of the <Menu> separate, there is the container, section and item part.

There is also a companion component called <ActionMenu> which you can use if you want to take some actions. You can have a look on how it works in the examples. It works quiet similar to the normal <Menu> component. All you have to add are the <Menu.Item>s.



To import the component you just have to use this code below.

import { Menu } from '@marigold/components';


Sorry! There are currently no variants and sizes available.

labelReactNodenoneThe label text for the Menu Button.
itemsIterable<T>noneItems in the Menu. Used for dynamic Menu
onAction(key: Key) => voidnoneHandler that should call an action.
selectionModesingle | multiplenoneThe type of selection.
selectedKeysall |Iterable<Key>noneThe selected Keys (id).
onSelectionChange(key) => anynoneHandler for the Selection.
disabledKeysIterable<Key>noneDisabled Keys (id) in the Menu.
openbooleanfalseIf the Menu is open.
placementPlacement"bottom"The placement of the element with respect to its anchor element.

Item Props

idKeynoneThe id for the item.
keyKeynoneThe key for the item.
downloadboolean | stringnoneCauses the browser to download the linked URL. A string may be provided to suggest a file name.
hrefstringnoneA URL linked to.
onOpenChange() => voidnoneHandler that is called when the overlay's open state changes.

Section Props

titlestringnoneThe title for the Menu Section.
keyKeynoneThe key for the item.
idKeynoneThe id for the item.


Simple Menu with Action

In this example you can see a simple <Menu> with some items to select. After selection an action can be applied.

To group related MenuItems, you can use <Menu.Section> and pass title for the group name.

Disabled Menu Items

In this example the <Menu> has set its prop disabeldKeys. So you can't interact with the <Menu.Item> anymore. Keep in mind, that you have to set an id to the <Menu.Item>.


In this example, an Icon has been inserted into the Button to serve as a kebab menu. As shown here, any type of icon can be used within the menu and there are no restrictions. It is very similar to the normal <Menu> component.

Here you can see how the properties open and onOpenChange are used together with a <Button>. A function handles the state for the menu. You just can open the <Menu> with the external <Button> component, not with the menu button. A common use Case is also to open the <Menu> with the keyboard.

This Example shows how to open a <Dialog> from a <Menu.Item>.

Here you can see how the selectionMode from <Menu> works. In this example the selectionMode is set to single. If you open the items you can see a selected item.