> For the complete documentation index, see [llms.txt](https://apcom.gitbook.io/altrone-ui/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://apcom.gitbook.io/altrone-ui/components/lists/contextmenu.md).

# ContextMenu

This component is used to show context menus

Context menu provides access to features that’s directly related to an item. This menu should be hidden by default. To show this menu user should click on special button. 

```tsx
import {} from 'altrone-ui';

const MENU: ContextMenuType = [
    { title: 'Cut', onClick: () => ... },
    { title: 'Copy', onClick: () => ... },
    { title: 'Paste', onClick: () => ... },
]

return <ContextMenu menu={MENU} onClose={() => ...} />
```

## Context Actions

ContextMenu consists of the list of actions. Each action can be parent action - it means that when user selects this action he can see the submenu.&#x20;

### <mark style="color:blue;">ContextMenuType</mark>

```typescript
type ContextMenuType = (ContextAction | ParentContextAction)[];
```

### <mark style="color:blue;">ContextAction</mark>

```typescript
type ContextAction =
  | ContextMenuClickAction
  | ContextMenuCheckboxAction
  | ContextMenuRadioListAction
  | SeparatorAction;
```

#### ContextMenuClickAction

```typescript
interface ContextMenuClickAction {
    title: string;
    onClick: (...args: unknown[]) => void;
    type?: 'action';
    icon?: JSX.Element;
    danger?: boolean;
    selected?: boolean; // available only in 2.0 and later
    hint?: string;
    disabled?: boolean;
    elementAbove?: () => JSX.Element;
    elementBelow?: () => JSX.Element;
}
```

#### ContextMenuCheckboxAction

```typescript
interface ContextMenuCheckboxAction {
    type: 'checkbox';
    title: string;
    onChange: (state: boolean) => void;
    checked: boolean;
    hint?: string;
    disabled?: boolean;
    elementAbove?: () => JSX.Element;
    elementBelow?: () => JSX.Element;
}
```

#### ContextMenuRadioListAction

```typescript
interface ContextMenuRadioListAction {
    type: 'radioList';
    options: Option<unknown>[];
    value: unknown;
    onChange: (value: unknown) => void;
    title?: string;
    hint?: string;
    disabled?: boolean;
    elementAbove?: () => JSX.Element;
    elementBelow?: () => JSX.Element;
}
```

#### SeparatorAction

```typescript
interface SeparatorAction {
    type: 'separator';
    elementAbove?: () => JSX.Element;
    elementBelow?: () => JSX.Element;
}
```

### <mark style="color:blue;">ParentContextAction</mark> <mark style="color:orange;">extends Omit\<ContextAction, 'onClick' | 'hint' | 'danger'></mark>

```typescript
interface ParentContextAction {
  title: string;
  children: ContextAction[];
  icon?: JSX.Element;
  danger?: boolean;
}
```

## Properties

| Property                                             | Type                                  | Description                                                                    |
| ---------------------------------------------------- | ------------------------------------- | ------------------------------------------------------------------------------ |
| **`menu`**<mark style="color:red;">**`*`**</mark>    | [`ContextMenuType`](#contextmenutype) | Menu items                                                                     |
| **`onClose`**<mark style="color:red;">**`*`**</mark> | `() => void`                          | Callback is called when user initiated closing of the menu                     |
| **`fluid`**                                          | `boolean`                             | If true the menu takes up the entire available width. Default value is `false` |
| **`maxHeight`**                                      | `number \| string`                    | Set max height of the menu. Default value is `unset`                           |

## History

* **`Altrone 2.2`**:
  * refactored `ParentContextAction` interface
  * added different types of `ContextAction`: checkbox, radioList and separator
  * added `elementAbove` prop for ContextAction
  * added `elementBelow` prop for ContextAction
* **`Altrone 2.0`**:
  * added `fluid` prop
  * added `maxHeight` prop
  * added `selected` prop for ContextMenuItem
* **`Altrone 1.0`**: initial release