# section

## Overview

Sections are used to group related items with each other. Sections can have headings, can be collapsable and are not associated with a destination.

Grouping items into sections:

* makes them discoverable
* makes them easy to locate
* tells the user that they are related

### Basic Example

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

{% hint style="success" %}
**`section` best practices**

* **Grouping items**: When grouping items, think about how they relate and place them in order of most to least frequently used.
* **Naming sections**: Give your sections short, concise names. Avoid using action words (you can keep those for button copy) - e.g. use “Wells” instead of “View wells”.
  {% endhint %}

## Standard Attributes

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

`<section label="{$:getRole()}: General"/>`

Provide a label for a group of navigation items.

```xml
<!-- XML -->
<navigation >
    <section label="General">
        <!-- Other navigation items here -->
    </section>
</navigation>
```

{% hint style="info" %}
**Note**: Omitting the label will still group items visually.
{% endhint %}

## Advanced Attributes

### **`collapsable`**

**Optional**

**Type**: `boolean`

**Default**: `false`

`<section collapsable="true"/>`

Specify that the section should be collapsable.

```xml
<!-- XML -->
<navigation >
    <section collapsable="$:shouldCollapse()">
        <!-- Other navigation items here -->
    </section>
</navigation>
```

```javascript
// JS
function shouldCollapse() {
    // Your conditional logic here
    return true;
}
```

### **`from-js`**

**Optional**

Construct a section from JavaScript/TypeScript using a [`$:function`](https://docs.journeyapps.com/reference/app-features/calling-js-functions-from-xml) that returns an object array of type `navigationSection`.

```xml
<!-- XML -->
<navigation >
    <section from-js="$:buildSectionFromJS()"/>
</navigation>
```

```javascript
// JS
function buildSectionFromJS() {
    return component.navigationSection({
        label: 'General',
        items: buildItems()
    })
}


function buildItems() {
// Logic to build an array of component.navigationItem objects
}
```

### **`id`**

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

### **`items`**

`<section items="$:buildItems()"/>`

Construct a section's items from Javascript using a [`$:function`](https://docs.journeyapps.com/reference/app-features/calling-js-functions-from-xml) that returns an object array of type `navigationItem`.

```xml
<!-- XML -->
<navigation >
    <section items="$:buildItems()"/>
</navigation>
```

```javascript
// JS
function buildItems() {
    var icons = ["fa-building", "fa-user-alt"];
    var paths = ["sites", "users"];

    return ["Sites", "Users"].map(function(item, idx) {
        return component.navigationItem({
            label: item,
            icon: icons[idx],
            view: paths[idx]
        });
    });
}
```

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