divider

Overview

When a context-menu is packed with content, its items can become hard to navigate. Grouping related items together can solve this usability issue. Group items together by adding divider lines between groups.

Grouping items with divider lines:

• makes them discoverable

• makes them easy to locate

• tells the user that they are related

Best practice

When grouping items, think about how they relate and place them in order of most to least frequently used.

Basic Example

main.view.xml

<context-menu>
    <item label="Import tasks" icon="fa-download" on-press="$:navigate.link('import')" />
    <item label="Export tasks" icon="fa-upload" on-press="$:navigate.link('export')" />
    <divider/>
    <item label="Shortcuts" icon="fa-keyboard" on-press="$:navigate.link('keyboard_shortcuts')" />
    <!-- A `divider` element will automatically be added to separate the above items -->
    <!-- from non-customizable app items, e.g. 'Diagnostics' -->
</context-menu>

Standard Attributes

None

Advanced Attributes

show-if and hide-if

show-if

hide-if