New to Kendo UI for Angular? 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-sizeNumber$kendo-font-size-lg16px
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-bgColor$kendo-popup-bg#ffffff
Description
The background of the menu popup.
$kendo-menu-popup-textColor$kendo-popup-textrgba(0, 0, 0, 0.87)
Description
The text color of the menu popup.
$kendo-menu-popup-borderColor$kendo-popup-borderrgba(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-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
Horizontal padding of the menu item in popup.
$kendo-menu-popup-item-padding-yNumberk-map-get( $kendo-spacing, 2 )8px
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( 32px + 16px )
Description
The end padding of the menu item in popup.
$kendo-menu-popup-sm-item-icon-margin-startNumber$kendo-menu-popup-sm-item-padding-x16px
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( 32px + 16px ) - 8px))
Description
The end margin of the menu item expand icon.
$kendo-menu-popup-item-spacingNumber0px0px
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-bgColor$kendo-list-item-hover-bgrgba(0, 0, 0, 0.04)
Description
The background of hovered menu item in popup.
$kendo-menu-popup-item-hover-textColor$kendo-list-item-hover-textrgba(0, 0, 0, 0.87)
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-bgColor$kendo-list-item-selected-bg#ffffff
Description
The background of expanded menu item in popup.
$kendo-menu-popup-item-expanded-textColor$kendo-list-item-selected-text#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?