divider
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.
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>
None
Last modified 7mo ago