---
title: Overview
position: 1
seo_title: Overview of the Menu Component
seo_description: Learn about the basic features of the Telerik and Kendo UI Menu
  component and its types, check out the extensive set of available options in
  its live demo, and change its appearance by setting the variant and the
  orientation of the component.
---
## Menu Overview

The Menu component is a UI element for displaying a list of items in a popup. It facilitates efficient navigation and organization within applications by grouping actions into selectable options for users to choose from. Commonly used in both web and desktop applications, the Menu component helps maximize screen real estate and optimize user workflows by consolidating commands and navigation links. It can be oriented horizontally or vertically and supports multiple levels of submenus, allowing for the management of large hierarchical structures without cluttering the user interface. 

### Live Demo

<LiveDemo data='{"links":[{"text":"Angular","url":"https://www.telerik.com/kendo-angular-ui/components/menus"},{"text":"Blazor","url":"https://docs.telerik.com/blazor-ui/components/button/overview"},{"text":"jQuery","url":"https://docs.telerik.com/kendo-ui/controls/menu/overview"},{"text":"React","url":"https://www.telerik.com/kendo-react-ui/components/layout/menu/"},{"text":"Vue","url":"https://www.telerik.com/kendo-vue-ui/components/layout/menu/"},{"text":"ASP.NET Core","url":"https://docs.telerik.com/aspnet-core/html-helpers/navigation/menu/overview"},{"text":"ASP.NET MVC","url":"https://docs.telerik.com/aspnet-mvc/html-helpers/navigation/menu/overview"}],"demo":"components/menu/overview"}'></LiveDemo>

### Appearance

Menus provide built-in styling options that grant visually appealing and flexible rendering experience. 

Apart from the default vision of the Telerik and Kendo UI Menu, the component supports alternative styling options that enable you to configure the individual aspects of its appearance.

#### States

Depending on the action you want to imply through its appearance, the Telerik and Kendo UI Menu can acquire the following states which you can set by using the following classes:

* A menu Item in its normal state appears usable and clickable.
* `k-hover`&mdash;When a user hovers over a menu item, it enters the hover state. This state indicates that the control is interactive, and that the user can click on it.
* `k-focus`&mdash;When a user clicks or tabs into a menu item it enters the focus state. This state indicates that the control is active and ready to receive user selection and includes a visual indicator such as a highlighted border.
* `k-active`&mdash;The active state is applied when a menu item is activated upon user interaction.
* `k-selected`&mdash;The selected state of a menu item is activated after the user has selected it.
* `k-disabled`&mdash;The disabled state indicates that a menu item is temporarily unclickable and users cannot interact with it. To indicate that they are unavailable, menu items in their disabled state are faded.

#### Anatomy

The anatomy of the Menu summarizes the elements of the component:

<BlueprintImage data='{"description":"","labels":[{"text":"Menu item"},{"text":"Menu item label"},{"text":"Menu item expand icon"},{"text":"Submenu item"},{"text":"Menu header"},{"text":"Popup with submenu items"}]}'>![A Telerik and Kendo UI Menu component showing the menu item, label, expand icon, submenu item, menu header, and popup with submenu items.](images/components-menu-overview-anatomy.png "Anatomy and elements of a Telerik and Kendo UI Menu component")</BlueprintImage>

#### Size

The Menu provides the `size` configuration option that enables you to control how big or small the rendered submenu items in the popup will be. The Menu also provides options for size customization.

`size` provides the following available options:

* `small`—Renders small small submenu items, which are suitable for compact scenarios, where the available space is limited.
* `medium` (default)—Renders medium submenu items.
* `large`—Renders large submenu items, which are suitable for more spacious designs.
* `none`&mdash;Does not set a `size` and allows you to add your own, custom value.

<BlueprintImage data='{"description":"","labels":[{"text":"Small"},{"text":"Medium (default)"},{"text":"Large"}]}'>![Three Telerik and Kendo UI Menu components demonstrating the small, default medium, and large sizes of the submenu items..](images/components-menu-overview-size.png "Available sizes of the submenu items in the Telerik and Kendo UI Menu component including small, default medium, and large.")</BlueprintImage>

#### Variants

Depending on the elements they display, the menu items of the Telerik and Kendo UI Menu can be any of the following types:

* Label only
* With expand icon
* With icon before
* With icon after

<BlueprintImage data='{"description":"","labels":[{"text":"Label Only"},{"text":"With expand icon"},{"text":"With Icon before"},{"text":"With Icon after"}]}'>![A Telerik and Kendo UI Menu component and its possible variants including label only Menu, Menu with expand icon, Menu with icon before, and Menu with icon after](images/components-menu-overview-variants.png "The four possible variants of the Telerik and Kendo UI Menu component")</BlueprintImage>

#### Orientation

Depending on the orientation, the Telerik and Kendo UI Menu can be any of the following types:

* Horizontal&mdash;Menu items arranged side by side with submenus popping up below, perfect for top bar navigation.
* Vertical&mdash;Menu items arranged one over another with submenus extending rightward, ideal for side panel navigation.

<BlueprintImage data='{"description":"","labels":[{"text":"Horizontal"},{"text":"Vertical"}]}'>![A Telerik and Kendo UI Menu component and its possible orientations including horizontal and vertical](images/components-menu-overview-orientation-v2.png "The two possible orientations of the Telerik and Kendo UI Menu component")</BlueprintImage>

#### Separator

The Telerik and Kendo UI Menu can be rendered with separators to provide additional space between items and to improve visual clarity when used for grouping purposes.

* Horizontal menu with separators
* Vertical menu with separators

<BlueprintImage data='{"description":"","labels":[{"text":"Horizontal menu with separators"},{"text":"Vertical menu with separators"}]}'>![A Telerik and Kendo UI Menu component with separators in a horizontal and vertical orientation](images/components-menu-overview-separators-v3.png "A Telerik and Kendo UI Menu component with separators in a horizontal and vertical orientation")</BlueprintImage>

### Framework-Specific Documentation

For specific information about the component, refer to its official product documentation:

<Wrap>
<ExternalResource data='{"title":"Kendo UI for Angular Menu","description":"Find more information about the Kendo UI for Angular Menu in the official product documentation of the component.","url":"http://www.telerik.com/kendo-angular-ui/components/menus/"}'>![Kendo UI for Angular logo.](/images/angular-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for Blazor Menu","description":"Find more information about the Telerik UI for Blazor Menu in the official product documentation of the component.","url":"https://docs.telerik.com/blazor-ui/components/button/overview"}'>![Telerik UI for Blazor logo.](/images/blazor-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for jQuery Menu","description":"Find more information about the Kendo UI for jQuery Menu in the official product documentation of the component.","url":"https://docs.telerik.com/kendo-ui/controls/menu"}'>![Kendo UI for jQuery logo.](/images/jquery-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"KendoReact Menu","description":"Find more information about the KendoReact Menu in the official product documentation of the component.","url":"https://www.telerik.com/kendo-react-ui/components/layout/menu/"}'>![Kendo UI for React logo.](/images/react-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for Vue Menu","description":"Find more information about the Kendo UI for Vue Menu in the official product documentation of the component.","url":"https://www.telerik.com/kendo-vue-ui/components/layout/menu/"}'>![Kendo UI for Vue logo.](/images/vue-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET Core Menu","description":"Find more information about the Telerik UI for ASP.NET Core Menu component.","url":"https://docs.telerik.com/aspnet-core/html-helpers/navigation/menu/overview"}'>![Telerik UI for ASP.NET Core logo.](/images/core-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET MVC Menu","description":"Find more information about the Telerik UI for ASP.NET MVC Menu component.","url":"https://docs.telerik.com/aspnet-mvc/html-helpers/navigation/menu/overview"}'>![Telerik UI for ASP.NET MVC logo.](/images/mvc-logo.svg)</ExternalResource>

</Wrap>