---
title: Usage
position: 2
seo_title: Guidelines for Using the ContextMenu Component
seo_description: Get the knack of the Telerik and Kendo UI ContextMenu and learn
  how to use and implement the component by following the instructions and
  recommendations in the user guidelines created by our designers.
---
## Usage Guidelines

The Telerik and Kendo UI ContextMenu requires you to follow some basic principles when using the component.

### Icon Before

Icons can significantly enhance the understanding of submenu items by providing visual cues. To maintain balance and avoid undue emphasis on certain items, it's crucial to apply icons consistently across all submenu items.

<DosDonts>
<Do description="Apply icons consistently before labels in submenu items to enhance user experience and minimize cognitive load.">![A Telerik and Kendo UI ContextMenu component ](images/components-contextmenu-icon-before-do.png "A Telerik and Kendo UI ContextMenu component")</Do>
<Dont description="Avoid using icons randomly in submenu items, as this can confuse users and disproportionately highlight certain items over others of equal importance.">![A Telerik and Kendo UI ContextMenu component ](images/components-contextmenu-icon-before-dont.png "A Telerik and Kendo UI ContextMenu component ")</Dont>
</DosDonts>


### Grouping with Separators

Separators effectively create distinct sections within popups, organizing a larger number of submenu items into manageable groups.

<DosDonts>
<Do description="Use separators to divide submenu items into coherent sections in complex menus, reducing the need for multiple levels and minimizing the number of popups.">![A Telerik and Kendo UI ContextMenu](images/components-contextmenu-grouping-with-separators-do.png "")</Do>
<Dont description="Avoid creating excessive levels or popups, as too many can overwhelm users and complicate navigation.">![A Telerik and Kendo UI ContextMenu ](images/components-contextmenu-grouping-with-separators-dont.png "")</Dont>
</DosDonts>