# 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

{% hint style="info" %}
**Best practice**

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

### Basic Example

{% code title="main.view\.xml" %}

```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>
```

{% endcode %}

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-bac8a6ce0cacf9ee67d70458d323df24ac15d3f2%2Fcontext-menu-divider-example.png?alt=media)

## Standard Attributes

None

## Advanced Attributes

### `show-if` and `hide-if`

{% content-ref url="../../xml-fields/show-if" %}
[show-if](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/show-if)
{% endcontent-ref %}

{% content-ref url="../../xml-fields/hide-if" %}
[hide-if](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/hide-if)
{% endcontent-ref %}