> 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

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