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-width1px
Description
Width of the border around the menu popup.
$kendo-menu-popup-font-sizeNumber$kendo-font-size-md1rem
Description
Font sizes of the menu popup.
$kendo-menu-popup-line-heightNumber$kendo-line-height-md1.5
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-text#212529
Description
The text color of the menu popup.
$kendo-menu-popup-borderColor$kendo-popup-border#dee2e6
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 )1rem
Description
Horizontal padding of the menu item in popup.
$kendo-menu-popup-item-padding-yNumberk-map-get( $kendo-spacing, 1 )0.25rem
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(2rem + 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-x1rem
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(2rem + 16px) - 0.5rem))
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-bg#e9ecef
Description
The background of hovered menu item in popup.
$kendo-menu-popup-item-hover-textColor$kendo-list-item-hover-text#212529
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#0d6efd
Description
The background of expanded menu item in popup.
$kendo-menu-popup-item-expanded-textColor$kendo-list-item-selected-textwhite
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-shadowList$kendo-menu-item-focus-shadowinset 0 0 0 3px rgba(33, 37, 41, 0.15)
Description
The base shadow of focused menu item in popup.

In this article

Not finding the help you need?