Menu
The Menu component is a versatile dropdown system that allows for contextual actions or navigation. It can be triggered by various events, such as clicks, and includes a range of customizable components like Menu.Item, Menu.Link, Menu.Section, and more.
Usage
First of all, you need to import the Menu component from the kitchn package.
import { Menu } from "kitchn"Default
Disabled Items
Link Items
Unstyled
Scope Switcher
Props
Menu.Container
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
placement | string | "bottomStart" | No | Determines the position of the menu relative to the button. |
trigger | string | "click" | No | Specifies the event that triggers the menu. |
hideArrow | boolean | true | No | If true, the menu arrow is hidden. |
portalCss | css | undefined | No | Additional styles for the menu portal. |
Menu.Button
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
unstyled | boolean | false | No | If true, the button renders without styles. |
Menu.Item
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
disabled | boolean | false | No | If true, the menu item is disabled and cannot be clicked. |
active | boolean | false | No | If true, the menu item is highlighted as active. |
Menu.Section
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
title | string | undefined | Yes | The title for the section, displayed above the section's items. |