# item

## Overview

An `item` within a `context-menu` should make it clear to the user what will happen when they select that `item`. An `item` has a [`label`](#label), an associated action (via its [`on-press`](#on-press) attribute) and optionally an [`icon`](#icon).

{% hint style="info" %}
**Best practices**

* **Naming an item:** Give an `item` a short, concise name. Use action words only if the item triggers an action.
* **Icons:** Really consider the role that icons play. They are meant to supplement communication and should almost be able to portray a concept without accompanying text - so choose them wisely.
  * Apply icons to all child items within one group, or none.
    {% endhint %}

### Basic Example

{% code title="main.view\.xml" %}

```xml
<context-menu>
    <item label="Video Tutorials" icon="fa-play" on-press="$:navigate.link('video_tutorials')" />
    <item label="FAQ" icon="fa-question-circle" 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>
```

{% endcode %}

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-360058605e02f46b340c1898ae8f9db614b89ce1%2Fcontext-menu-item-example.png?alt=media)

## Standard Attributes

### `icon`

**Optional**

**Type**: `string`

**Default**: unset

The icon to display on the `item`, it will be placed on the left of the `label` by default. The `icon` can be a [Font Awesome icon](https://docs.journeyapps.com/reference/build/ui-components/icons#font-awesome-icons), an [Ionicons icon](https://docs.journeyapps.com/reference/build/ui-components/icons#ionicons-icons) or a png icon asset.

{% code title="main.view\.xml" %}

```xml
<context-menu>
    <item label="FAQ" icon="fa-question-circle" on-press="$:navigate.link('faq')" />
</context-menu>
```

{% endcode %}

### `label`

**Optional**

**Type**: `string` (static text, a [format string](https://docs.journeyapps.com/reference/app-features/xml-format-strings) or the return value of a [JS/TS function](https://docs.journeyapps.com/reference/app-features/calling-js-functions-from-xml))

**Default**: Unset

The text that appears on the `item` to describe it.

{% code title="main.view\.xml" %}

```xml
<context-menu>
    <item label="FAQ" icon="fa-question-circle" on-press="$:navigate.link('faq')" />
</context-menu>
```

{% endcode %}

### `on-press`

{% content-ref url="../../xml-fields/on-press" %}
[on-press](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/on-press)
{% endcontent-ref %}

Note: When constructing an item from JavaScript/TypeScript, use `onPress`, i.e.:

{% code title="main.js" %}

```javascript
function buildContextMenuItem() {
    return component.contextMenuItem({
        label= "Video Tutorials",
        icon="fa-play",
        onPress:function() {
            navigate.link("video_tuts");
        }
    })
}
```

{% endcode %}

## Advanced Attributes

### `from-js`

**Optional**

**Default**: unset

Construct a `context-menu` `item` from JavaScript/TypeScript.

{% code title="main.view\.xml" %}

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

{% endcode %}

{% code title="main.js" %}

```javascript
function buildContextMenuItem() {
    return component.contextMenuItem({
        label= "Video Tutorials",
        icon="fa-play",
        onPress:function() {
            navigate.link("video_tuts");
        }
    })
}
```

{% endcode %}

### `validate`

**Optional**

**Type**: `boolean`

**Default**: `false`

Set to `true` to ensure that no required input fields in the current view are empty before performing the [`on-press`](#on-press) action.

### `show-if` and `hide-if`

{% content-ref url="../../xml-fields/show-if" %}
[show-if](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/show-if)
{% endcontent-ref %}

{% content-ref url="../../xml-fields/hide-if" %}
[hide-if](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/hide-if)
{% endcontent-ref %}