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

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

Standard Attributes

label

Optional

Type: string (static text, a format string or the return value of a JS/TS function)

Default: unset

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

Provide a label for a group of navigation items.

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

Note: Omitting the label will still group items visually.

Advanced Attributes

collapsable

Optional

Type: boolean

Default: false

<section collapsable="true"/>

Specify that the section should be collapsable.

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

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

from-js

Optional

Construct a section from JavaScript/TypeScript using a $:function that returns an object array of type navigationSection.

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

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


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

id

id

items

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

Construct a section's items from Javascript using a $:function that returns an object array of type navigationItem.

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

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

show-if

hide-if