section
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
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”.
Optional
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.
Optional
Type:
booleanDefault:
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;
}
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
}
<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]
});
});
}
Last modified 1yr ago