# Menu

The `Menu` component enables easily creating views for action lists.

```tsx
import {Menu} from '@gravity-ui/uikit';
```

It has dedicated components for items (`Menu.Item`) and groups (`Menu.Group`). You can combine them to create more complex menus.

```tsx
<Menu>
  <Menu.Item>First</Menu.Item>
  <Menu.Item>Second</Menu.Item>
  <Menu.Group label="Group">
    <Menu.Item>One</Menu.Item>
    <Menu.Item>Two</Menu.Item>
  </Menu.Group>
</Menu>
```

### Size

This property is used to select the menu size. The default value is `m`.

```tsx
<Menu size="s">
    <Menu.Item>First</Menu.Item>
    <Menu.Item>Second</Menu.Item>
</Menu>

<Menu size="m">
    <Menu.Item>First</Menu.Item>
    <Menu.Item>Second</Menu.Item>
</Menu>

<Menu size="l">
    <Menu.Item>First</Menu.Item>
    <Menu.Item>Second</Menu.Item>
</Menu>

<Menu size="xl">
    <Menu.Item>First</Menu.Item>
    <Menu.Item>Second</Menu.Item>
</Menu>
```

## Properties

| Name      | Description                                |           Type           | Default |
| :-------- | :----------------------------------------- | :----------------------: | :-----: |
| size      | Menu size                                  | `"s"` `"m"` `"l"` `"xl"` |  `"m"`  |
| children  | Child element                              |    `React.ReactNode`     |         |
| className | `class` HTML attribute                     |         `string`         |         |
| style     | `style` HTML attribute                     |  `React.CSSProperties`   |         |
| qa        | `data-qa` HTML attribute, used for testing |         `string`         |         |

## Menu.Item

This property is used to render menu items.

### Icon

Use the `iconStart` or `iconEnd` property to display an icon at the start or end of a menu item:

```tsx
<Menu>
  <Menu.Item iconStart={<Icon size={16} data={GearIcon} />}>Item with icon</Menu.Item>
  <Menu.Item>Item without icon</Menu.Item>
</Menu>
```

```tsx
<Menu>
  <Menu.Item iconEnd={<Icon size={16} data={TriangleExclamation} />}>Item with icon</Menu.Item>
  <Menu.Item>Item without icon</Menu.Item>
</Menu>
```

### States

Using this property, you can enable or disable (gray out) specific menu items:

```tsx
<Menu>
  <Menu.Item disabled>First</Menu.Item>
  <Menu.Item>Second</Menu.Item>
  <Menu.Item selected>Third</Menu.Item>
</Menu>
```

### Theme

This allows you to change the menu item theme. The default theme is `normal`.

```tsx
<Menu>
  <Menu.Item theme="danger">First</Menu.Item>
  <Menu.Item theme="normal">Second</Menu.Item>
  <Menu.Item>Third</Menu.Item>
</Menu>
```

### Properties

| Name             | Description                                    |           Type            |  Default   |
| :--------------- | :--------------------------------------------- | :-----------------------: | :--------: |
| iconStart        | Menu icon before item text                     |        `ReactNode`        |            |
| iconEnd          | Menu icon after item text                      |        `ReactNode`        |            |
| selected         | Menu item selected flag                        |         `boolean`         |  `false`   |
| disabled         | Menu item disabled flag                        |         `boolean`         |  `false`   |
| active           | Menu item active flag                          |         `boolean`         |  `false`   |
| href             | URL                                            |         `string`          |            |
| title            | Title attribute                                |         `string`          |            |
| target           | Target attribute                               |         `string`          |            |
| rel              | Rel attribute                                  |         `string`          |            |
| onClick          | Handler for onclick event                      | `React.MouseEventHandler` |            |
| theme            | Menu item theme                                |   `"normal"` `"danger"`   | `"normal"` |
| children         | Child element                                  |     `React.ReactNode`     |            |
| className        | `class` HTML attribute for the root element    |         `string`          |            |
| contentClassName | `class` HTML attribute for the content element |         `string`          |            |
| style            | `style` HTML attribute                         |   `React.CSSProperties`   |            |
| qa               | `data-qa` HTML attribute, used for testing     |         `string`          |            |
| extraProps       | Additional HTML attributes                     |         `Record`          |            |

## Menu.Group

You can group items by topics within a single menu:

```tsx
<Menu>
  <Menu.Item>First</Menu.Item>
  <Menu.Group label="Group One">
    <Menu.Item>One</Menu.Item>
    <Menu.Item>Two</Menu.Item>
  </Menu.Group>
  <Menu.Group label="Group Two">
    <Menu.Item>One</Menu.Item>
    <Menu.Item>Two</Menu.Item>
  </Menu.Group>
  <Menu.Item>Middle</Menu.Item>
  <Menu.Group label="Group Three">
    <Menu.Item>One</Menu.Item>
    <Menu.Item>Two</Menu.Item>
  </Menu.Group>
  <Menu.Item>Last</Menu.Item>
</Menu>
```

### Properties

| Name      | Description                                |         Type          | Default |
| :-------- | :----------------------------------------- | :-------------------: | :-----: |
| label     | Menu group label                           |       `string`        |         |
| children  | Child element                              |   `React.ReactNode`   |         |
| className | `class` HTML attribute                     |       `string`        |         |
| style     | `style` HTML attribute                     | `React.CSSProperties` |         |
| qa        | `data-qa` HTML attribute, used for testing |       `string`        |         |