---
title: "general-section"
description: "Configure utility items such as Messages, About, Log out, and other general actions."
permalink: /docs/runtime/all-ui-components/navigation-navigation-drawer/general-section/
---
# general-section

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 Runtime, e.g. Messages, About.

### Basic Example

![](./media/spaces-2f9tchlr67elhbojpvhhud-2fuploads-2fgit-blob-215a9f4dfd346aac5081649924843e669ee58818-2fnavigation-general-section-example-7b446f78.png)

## 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.

<Info>

Items built using the `items` attribute will be prepended to the items specified in XML.

</Info>

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

<AttributeReference label="show-if" href="/docs/runtime/common-component-attributes/show-if/" badge="advanced" tone="muted" />

### `hide-if`

<AttributeReference label="hide-if" href="/docs/runtime/common-component-attributes/hide-if/" badge="advanced" tone="muted" />