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
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>
Advanced Attributes
collapsable
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
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
idid
items
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-ifhide-ifshow-if
and hide-if
Last updated