New to Kendo UI for Vue? Start a free 30-day trial

Customizing Menu

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-menu-popup-padding-xNullnullnull
Description
Horizontal padding of the menu popup.
$kendo-menu-popup-padding-yNullnullnull
Description
Vertical padding of the menu popup.
$kendo-menu-popup-border-widthNumber$kendo-popup-border-width0px
Description
Width of the border around the menu popup.
$kendo-menu-popup-font-sizeStringvar( --kendo-font-size-lg, inherit )var(--kendo-font-size-lg, inherit)
Description
Font sizes of the menu popup.
$kendo-menu-popup-line-heightNumber1.251.25
Description
Line heights used along with $kendo-font-size.
$kendo-menu-popup-bgString$kendo-popup-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background of the menu popup.
$kendo-menu-popup-textString$kendo-popup-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the menu popup.
$kendo-menu-popup-borderString$kendo-popup-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the menu popup.
$kendo-menu-popup-gradientNullnullnull
Description
The background gradient of the menu popup.
$kendo-menu-popup-item-padding-xStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
Horizontal padding of the menu item in popup.
$kendo-menu-popup-item-padding-yStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
Vertical padding of the menu item in popup.
$kendo-menu-popup-item-padding-endCalculationcalc( #{$kendo-menu-popup-item-padding-x} * 2 + #{$kendo-icon-size} )calc(var(--kendo-spacing-4, 1rem) * 2 + 16px)
Description
The end padding of the menu item in popup.
$kendo-menu-popup-sm-item-icon-margin-startString$kendo-menu-popup-sm-item-padding-xvar(--kendo-spacing-4, 1rem)
Description
The start margin of the menu item expand icon.
$kendo-menu-popup-sm-item-icon-margin-endCalculationcalc( -1 * (#{$kendo-menu-popup-sm-item-padding-end} - #{k-math-div( $kendo-menu-popup-sm-item-padding-x, 2 )}) )calc(-1 * (calc(var(--kendo-spacing-4, 1rem) * 2 + 16px) - var(--kendo-spacing-4, 1rem)/2))
Description
The end margin of the menu item expand icon.
$kendo-menu-popup-item-spacingStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The spacing between the menu items in popup.
$kendo-menu-popup-item-bgNullnullnull
Description
The background of the menu item in popup.
$kendo-menu-popup-item-textNullnullnull
Description
The text color of the menu item in popup.
$kendo-menu-popup-item-borderNullnullnull
Description
The border color of the menu item in popup.
$kendo-menu-popup-item-gradientNullnullnull
Description
The background gradient of the menu item in popup.
$kendo-menu-popup-item-hover-bgString$kendo-list-item-hover-bgvar(--kendo-color-base-hover, #ebebeb)
Description
The background of hovered menu item in popup.
$kendo-menu-popup-item-hover-textString$kendo-list-item-hover-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of hovered menu item in popup.
$kendo-menu-popup-item-hover-borderNullnullnull
Description
The border color of hovered menu item in popup.
$kendo-menu-popup-item-hover-gradientNullnullnull
Description
The background gradient of hovered menu item in popup.
$kendo-menu-popup-item-expanded-bgString$kendo-list-item-selected-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background of expanded menu item in popup.
$kendo-menu-popup-item-expanded-textString$kendo-list-item-selected-textvar(--kendo-color-secondary, #e51a5f)
Description
The text color of expanded menu item in popup.
$kendo-menu-popup-item-expanded-borderNullnullnull
Description
The border color of expanded menu item in popup.
$kendo-menu-popup-item-expanded-gradientNullnullnull
Description
The background gradient of expanded menu item in popup.
$kendo-menu-popup-item-focus-shadowNullnullnull
Description
The base shadow of focused menu item in popup.

In this article

Not finding the help you need?