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

Customizing Menu

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-menu-popup-padding-xNull

null

null

Description
Horizontal padding of the menu popup.
$kendo-menu-popup-padding-yNull

null

null

Description
Vertical padding of the menu popup.
$kendo-menu-popup-border-widthNumber

$popup-border-width

0px

Description
Width of the border around the menu popup.
$kendo-menu-popup-font-sizeNumber

$font-size-lg

16px

Description
Font sizes of the menu popup.
$kendo-menu-popup-line-heightNumber

1.25

1.25

Description
Line heights used along with $font-size.
$kendo-menu-popup-bgColor

$popup-bg

white

Description
The background of the menu popup.
$kendo-menu-popup-textColor

$popup-text

rgba(0, 0, 0, 0.87)

Description
The text color of the menu popup.
$kendo-menu-popup-borderColor

$popup-border

rgba(0, 0, 0, 0.12)

Description
The border color of the menu popup.
$kendo-menu-popup-gradientNull

null

null

Description
The background gradient of the menu popup.
$kendo-menu-popup-item-padding-xNumber

map-get( $spacing, 4 )

16px

Description
Horizontal padding of the menu item in popup.
$kendo-menu-popup-item-padding-yNumber

map-get( $spacing, 2 )

8px

Description
Vertical padding of the menu item in popup.
$kendo-menu-popup-item-padding-endCalculation

calc( #{$kendo-menu-popup-item-padding-x * 2} + #{$icon-size} )

calc( 32px + 16px )

Description
The end padding of the menu item in popup.
$kendo-menu-popup-item-icon-margin-start-smNumber

$kendo-menu-popup-item-padding-x-sm

16px

Description
The start margin of the menu item expand icon.
$kendo-menu-popup-item-icon-margin-end-smCalculation

calc( -1 * (#{$kendo-menu-popup-item-padding-end-sm} - #{$kendo-menu-popup-item-padding-x-sm / 2}) )

calc(-1 * (calc( 32px + 16px ) - 8px))

Description
The end margin of the menu item expand icon.
$kendo-menu-popup-item-spacingNumber

0px

0px

Description
The spacing between the menu items in popup.
$kendo-menu-popup-item-bgNull

null

null

Description
The background of the menu item in popup.
$kendo-menu-popup-item-textNull

null

null

Description
The text color of the menu item in popup.
$kendo-menu-popup-item-borderNull

null

null

Description
The border color of the menu item in popup.
$kendo-menu-popup-item-gradientNull

null

null

Description
The background gradient of the menu item in popup.
$kendo-menu-popup-item-hover-bgColor

$kendo-list-item-hover-bg

rgba(0, 0, 0, 0.04)

Description
The background of hovered menu item in popup.
$kendo-menu-popup-item-hover-textColor

$kendo-list-item-hover-text

rgba(0, 0, 0, 0.87)

Description
The text color of hovered menu item in popup.
$kendo-menu-popup-item-hover-borderNull

null

null

Description
The border color of hovered menu item in popup.
$kendo-menu-popup-item-hover-gradientNull

null

null

Description
The background gradient of hovered menu item in popup.
$kendo-menu-popup-item-expanded-bgColor

$kendo-list-item-selected-bg

white

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-borderNull

null

null

Description
The border color of expanded menu item in popup.
$kendo-menu-popup-item-expanded-gradientNull

null

null

Description
The background gradient of expanded menu item in popup.
$kendo-menu-popup-item-focus-shadowNull

null

null

Description
The base shadow of focused menu item in popup.

In this article

Not finding the help you need?