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.
Note: Omitting the label will still group items visually.
Advanced Attributes
collapsable
collapsable
Optional
Type: boolean
Default: false
<section collapsable="true"/>
Specify that the section should be collapsable.
from-js
from-js
Optional
Construct a section from JavaScript/TypeScript using a $:function
that returns an object array of type navigationSection
.
id
id
items
items
<section items="$:buildItems()"/>
Construct a section's items from Javascript using a $:function
that returns an object array of type navigationItem
.
show-if
and hide-if
show-if
and hide-if
Last updated