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

1px

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

$font-size-md

14px

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

$line-height-md

1.4285714286

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

$popup-bg

#ffffff

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

$popup-text

#424242

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

$popup-border

rgba(0, 0, 0, 0.08)

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, 2 )

8px

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

map-get( $spacing, 1 )

4px

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( 16px + 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

8px

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( 16px + 16px ) - 4px))

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

#f0f0f0

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

$kendo-list-item-hover-text

#424242

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

#ff6358

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

$kendo-list-item-selected-text

white

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

$menu-item-focus-shadow

inset 0 0 0 2px rgba(0, 0, 0, 0.12)

Description
The base shadow of focused menu item in popup.

In this article

Not finding the help you need?