---
metaTitle: ContextMenu component | AwesCode UI
meta:
  - name: description
    content: The <AwContextMenu /> component is used to render ContextMenu - UI Vue component for AwesCode UI.
title: ContextMenu
---

# AwContextMenu

**Category:** Organism | **Import:** Dynamic

The `AwContextMenu` component is a context menu that displays a dropdown list of menu items. It's built on top of `AwDropdown` and `AwButton`, providing a button trigger with a menu list.

## Overview

`AwContextMenu` provides a context menu solution with:
- Button trigger with optional text/icon
- Dropdown menu with list items
- Keyboard navigation support
- Popper.js positioning
- Customizable button appearance
- Vertical menu layout

## Usage

### Basic Example

```markup
<AwContextMenu text="Menu">
    <AwButton>Item 1</AwButton>
    <AwButton>Item 2</AwButton>
    <AwButton>Item 3</AwButton>
</AwContextMenu>
```

### Icon Only

```markup
<AwContextMenu hide-text icon="awesio/more">
    <AwButton>Item 1</AwButton>
    <AwButton>Item 2</AwButton>
</AwContextMenu>
```

### With Custom Button

```markup
<AwContextMenu 
    text="Options"
    color="accent"
    button-class="custom-class"
>
    <AwButton>Edit</AwButton>
    <AwButton>Delete</AwButton>
</AwContextMenu>
```

### With Popper Options

```markup
<AwContextMenu 
    text="Menu"
    :options="{ placement: 'bottom-end' }"
>
    <AwButton>Item 1</AwButton>
    <AwButton>Item 2</AwButton>
</AwContextMenu>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| text | Button text label | `String` | `false` | `''` |
| hideText | Hide button text (show icon only) | `Boolean` | `false` | `null` (auto) |
| color | Button color | `String` | `false` | `'mono'` |
| buttonClass | Additional CSS class for button | `String` | `false` | `''` |
| vertical | Vertical menu layout | `Boolean` | `false` | `false` |
| options | Popper.js options object | `Object` | `false` | `{}` |

**Popper.js Options:**
See [Popper.js documentation](https://popper.js.org/docs/v2/) for all available options.

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| default | Menu items (should be button/link components) | - | - |
| icon | Custom button icon | - | Default icon |

### Events

This component does not emit custom events (uses internal state).

### Mixins

- `arrowFocusMixin` - Provides keyboard navigation support

## Related Components

- `AwDropdown` - Dropdown component used internally
- `AwButton` - Button component used for trigger and items

## Notes

- **Import Method:** Dynamic - Component is loaded on-demand as an organism
- Menu items should be button or link components
- Items automatically get `data-arrow-focus` attribute for keyboard navigation
- Button text is automatically hidden if `text` is empty and `hideText` is null
- Uses Popper.js for positioning (see Popper.js docs for options)
- Component is render-based (uses `render` function)
- Menu items are wrapped in `<li>` elements with `aw-cm-item` class
- Dropdown state is managed internally
- Keyboard navigation: Arrow keys to navigate, Enter to activate