---
title: Usage
position: 2
seo_title: Guidelines for Using the Menu Component
seo_description: Get the knack of the Telerik and Kendo UI Menu 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 Menu requires you to follow some basic principles when using the component.

### Icon Before

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

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


### Grouping with Separators

Separators effectively create distinct sections within menu popups, organizing a larger number of options 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 Menu](images/components-menu-grouping-with-separators-do-v2.png "")</Do>
<Dont description="Avoid creating excessive levels or popups, as too many can overwhelm users and complicate navigation.">![A Telerik and Kendo UI Menu ](images/components-menu-grouping-with-separators-dont.png "")</Dont>
</DosDonts>


### Orientation and Layout

The orientation of the Menu component can be configured to suit various layout scenarios like toolbars and side panels, enhancing usability and aesthetic appeal.

<DosDonts>
<Do description="Use vertical orientation in components such as side panels to ensure content is fully visible and does not overlap.">![A Telerik and Kendo UI Menu](images/components-menu-orientation-and-layout-do.png "")</Do>
<Dont description="Avoid using horizontal orientation in vertical components as it may lead to important navigation elements being obscured or overlapped.">![A Telerik and Kendo UI Menu](images/components-menu-orientation-and-layout-dont.png "")</Dont>
</DosDonts>