Links

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

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

Last modified 1yr ago