# item

## Overview

An `item` in the `general-section` is similar to that in a `section`. These provide users a way to perform an action or navigate to a view. See more information [here](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/navigation-navigation-drawer/section/item).

In addition to customizable items, the `general-section` contains a number of non-customizable items, namely links to the "Messages", "Set Language" and "About" screens.

### Basic Example

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

## Standard Attributes

### **`label`**

See [`section` > `item` > `label`](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/section/item#label)

### `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 %}

### `validate`

**Optional**

**Type**: `boolean`

**Default**: `false`

Validation will check all required fields on the view and confirm that they contain values before performing the `on-press` action.

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

```xml
<item label="User details" on-press="$:userDetails()" validate="true" />
```

{% endcode %}

## Advanced Attributes

### `from-js`

See [`section` > `item` > `from-js`](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/section/item#from-js)

### `id`

See [`section` > `item` > `id`](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/section/item#id)

### `icon`

See [`section` > `item` > `icon`](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/section/item#icon)

### `indicator`

See [`navigation` > `indicator`](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/navigation-navigation-drawer/..#indicator)

### `items`

See [`section` > `item` > `items`](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/section/item#items)

### `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 %}

### `type`

**Optional**

**Type**: `messages`

**Default**: The default messages page will be setup and included in the `general-section`.

Overrides the default Messages `item` in the `general-section`. It is important to also specify an [`indicator`](#indicator) for this `item`.

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

```xml
<general-section>
    <item type="messages"
          label="Custom Messages"
          on-press="$:navigate.link('custom_messages')"
          indicator="$:messageIndicator()" icon="far fa-envelope"  />
</general-section>
```

{% endcode %}

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

```javascript
function messageIndicator() {
    var messages = DB.push_notification.where(
        "user = ? and status = ?",
        user,
        null
    );
    var count = messages.count();
    return count == 0 ? null : { value: count, color: "negative" };
}
```

{% endcode %}