# general-section

## Overview

This section hosts basic app items. The items don’t necessarily form part of the user’s workflow and will probably be used less often than items in other sections. Examples include Log out, Toggle theme, etc. Several items in this section are specified by the JourneyApps Runtime, e.g. Messages, About.

### Basic Example

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

## Standard Attributes

None

## Advanced Attributes

### **`items`**

`<general-section items="$:buildGeneralItems()/>`

Build general section items from JS, using a function that returns an array of `component.navigationGeneralSectionItem` objects. The function is specified using the `from-js="$:function()"` attribute.

Items can be given an id using `id="itemId"`.

An item can have an `on-press` attribute defined, which is a function executed when the item is pressed.

{% hint style="info" %}
Items built using the `items` attribute will be prepended to the items specified in XML.
{% endhint %}

```xml
<!-- XML -->
<general-section items="$:buildGeneralItems()">
    <!-- other items here -->
</general-section>
```

```javascript
// JS
function buildGeneralItems() {
    // Logic here
    return [
        component.navigationGeneralSectionItem({
            label: "Log out",
            icon: "fa-sign-out-alt",
            onPress: function() {
                navigate.clear('main');
            }
        })
    ]
}
```

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