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.
Import
import { Menu } from '@marigold/components';Apperance
Sorry! There are currently no variants and sizes available.
Props
Menu
| Property | Type | Default | Description |
|---|---|---|---|
label | ReactNode | none | The label text for the Menu Button. |
items | Iterable<T> | none | Items in the Menu. Used for dynamic Menu |
onAction | (key: Key) => void | none | Handler that should call an action. |
selectionMode | single |Â multiple | none | The type of selection. |
selectedKeys | all |Iterable<Key> | none | The selected Keys (id). |
onSelectionChange | (key) => any | none | Handler for the Selection. |
disabledKeys | Iterable<Key> | none | Disabled Keys (id) in the Menu. |
open | boolean | false | If the Menu is open. |
placement | Placement | "bottom" | The placement of the element with respect to its anchor element. |
Menu.Item
| Property | Type | Default | Description |
|---|---|---|---|
id | Key | none | The id for the item. |
key | Key | none | The key for the item. |
download | boolean | string | none | Causes the browser to download the linked URL. A string may be provided to suggest a file name. |
href | string | none | A URL linked to. |
onOpenChange | () => void | none | Handler that is called when the overlay's open state changes. |
Menu.Section
| Property | Type | Default | Description |
|---|---|---|---|
title | string | none | The title for the Menu Section. |
key | Key | none | The key for the item. |
id | Key | none | The id for the item. |
Examples
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.
Menu with Sections
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>.
ActionMenu
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.
Menu with onOpenChange property
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.
Menu item opens Dialog
This Example shows how to open a <Dialog> from a <Menu.Item>.
Menu selection mode
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.