Styling & Themes / Bootstrap Theme / Customizing Menu / 
New to Kendo UI for Vue? 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

1px

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

$font-size-md

1rem

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

$line-height-md

1.5

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

#212529

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

$popup-border

#dee2e6

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 )

1rem

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

map-get( $spacing, 1 )

0.25rem

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( 2rem + 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

1rem

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( 2rem + 16px ) - 0.5rem))

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

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

#0d6efd

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 3px rgba(33, 37, 41, 0.15)

Description
The base shadow of focused menu item in popup.

Suggested Links

Previous
Customizing List
Next
Customizing Menu-button

In this article

Not finding the help you need?

Contact Support