---
title: "item"
description: "Define a general-section item for utility actions or secondary navigation."
permalink: /docs/build/ui-components/all-ui-components/navigation-navigation-drawer/general-section/item/
---
# item

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](/docs/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

![](./media/spaces-2f9tchlr67elhbojpvhhud-2fuploads-2fgit-blob-312b3feb905374db5b955374d3d4e8218959c082-2fnavigation-general-secton-item-example-57949e77.png)

## Standard Attributes

### **`label`**

See [`section` > `item` > `label`](/docs/build/ui-components/all-ui-components/section/item/#label)

### `validate`

<SyntaxCard type={"boolean"} defaultValue={"false"} />

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

**main.view\.xml**

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

## Advanced Attributes

### `from-js`

See [`section` > `item` > `from-js`](/docs/build/ui-components/all-ui-components/section/item/#from-js)

### `id`

See [`section` > `item` > `id`](/docs/build/ui-components/all-ui-components/section/item/#id)

### `icon`

See [`section` > `item` > `icon`](/docs/build/ui-components/all-ui-components/section/item/#icon)

### `indicator`

See [`navigation` > `indicator`](/docs/build/ui-components/all-ui-components/#indicator)

### `items`

See [`section` > `item` > `items`](/docs/build/ui-components/all-ui-components/section/item/#items)

### `type`

<SyntaxCard type={"messages"} defaultValue={"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`.

**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>
```

**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" };
}
```

### `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" />

## Common Attributes

### `on-press`

<AttributeReference label="on-press" href="/docs/build/ui-components/common-attributes/on-press/" />