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>