---
title: "context-menu"
description: "Overview"
permalink: /docs/build/ui-components/all-ui-components/context-menu/
---
# context-menu

## Overview

<Info title={"Version compatibility"}>

`context-menu` was introduced in version **4.57.0** of the JourneyApps Runtime.

</Info>

The `context-menu` is accessible via the ‘more’ icon on the right-hand-side of the app title bar.

`context-menu` should be used to display contextual items or actions relevant to the current view. Items that are relevant to the app globally (e.g. About, Messages, selecting a different language) should rather be displayed in the [navigation drawer](/docs/build/ui-components/all-ui-components/navigation-navigation-drawer/).

![](./media/spaces-2f9tchlr67elhbojpvhhud-2fuploads-2fgit-blob-44b8d1f030ac77a55e7321d89053e7d2b53c9eae-2fcontext-menu-overview-ade2d27c.png)

Referencing the image above, a `context-menu` consists of:

1. Custom [`item`](/docs/build/ui-components/all-ui-components/context-menu/item/) elements
2. [`divider`](/docs/build/ui-components/all-ui-components/context-menu/divider/) elements
3. Non-customizable app items, which are provided by the JourneyApps Runtime

### Basic Example

**main.view\.xml**

```xml
<context-menu>
    <item label="Video Tutorials" on-press="$:navigate.link('video_tutorials')" />
    <item label="FAQ" on-press="$:navigate.link('faq')" />
    <!-- A `divider` element will automatically be added to separate the above items -->
    <!-- from non-customizable app items, e.g. 'Diagnostics' -->
</context-menu>
```

![](./media/spaces-2f9tchlr67elhbojpvhhud-2fuploads-2fgit-blob-8f7c081e52bc9eacb4bd37c89c4af3d30800364e-2fcontext-menu-example-38f4672d.png)

## Advanced Attributes

### `from-js`

<SyntaxCard defaultValue={"unset"} />

Construct a `context-menu` from JavaScript/TypeScript using a [`$:function`](/docs/app-features/calling-js-functions-from-xml/) that returns a `contextMenu` object.

**main.view\.xml**

```xml
<context-menu from-js="$:buildContextMenu()" />
```

**main.js**

```javascript
function buildContextMenu() {
    var icons = ["fa-play", "fa-question-circle"];
    var paths = ["video_tuts", "faq"]

    return component.contextMenu({
        items: ["Video Tutorials", "FAQ"].map(function(name, index) {
            return component.contextMenuItem({
                label: name,
                icon: icons[index],
                onPress: function() {
                    navigate.link(paths[index]);
                }
            });
        })
    });
}
```

### `items`

<SyntaxCard defaultValue={"unset"} />

Construct `context-menu` items from JavaScript/TypeScript using a [`$:function`](/docs/app-features/calling-js-functions-from-xml/) that returns an object array of type `contextMenuItem`.

<Info>

`item` elements can also be added individually to the `context-menu`, see their [reference documentation](/docs/build/ui-components/all-ui-components/context-menu/item/).

</Info>

**main.view\.xml**

```xml
<context-menu items="$:buildContextItems()" />
```

**main.js**

```javascript
function buildContextItems() {
    var icons = ["fa-play", "fa-question-circle"];
    var paths = ["video_tuts", "faq"]

    return ["Video Tutorials", "FAQ"].map(function(name, index) {
        return component.contextMenuItem({
            label: name,
            icon: icons[index],
            onPress: function() {
                navigate.link(paths[index]);
            }
        });
    });
}
```

### `id`

<AttributeReference label="id" href="/docs/build/ui-components/common-attributes/id/" badge="advanced" tone="muted" />

### `show-if`

<AttributeReference label="show-if" href="/docs/build/ui-components/common-attributes/show-if/" badge="advanced" tone="muted" />

### `hide-if`

<AttributeReference label="hide-if" href="/docs/build/ui-components/common-attributes/hide-if/" badge="advanced" tone="muted" />

## Component Methods

The following component methods are available when an [`id`](/docs/build/ui-components/common-attributes/id/) is assigned to the component and `component.contextmenu({id:'my-id'})` is called from JS/TS:

### `select`

Programmatically select an item from the `context-menu` by its label.

**main.view\.xml**

```xml
<context-menu id="my-id">
    <item label="Video Tutorials" on-press="$:navigate.link('tutorials')" />
    <item label="FAQ" icon="fa-help" on-press="$:navigate.link('faq')" />
</context-menu>
```

**main.js**

```javascript
function init() {
    // Register a keyboard shortcut to trigger the component method
    ShortcutManager.registerShortcut("CTRL+T", function() { 
        return selectFAQ();
    });
}

function selectTutorials() {
    component.contextmenu({id: 'my-id'}).select('Video Tutorials');
}
```