DropDownButton

DropDownButtons allow the user to choose an option from a popup list with predefined menu items.

Sass Variables

The Telerik and Kendo UI DropDownButton is a composite UI component that consists of button and drop-down menu elements and a Popup component. To configure and customize its appearance, use not only its dedicated Sass variables but also the Menu Sass variables, as well as the Sass variables provided by the Popup and Button components.

DropDownButton Variables

VariableDefault ValueComputed ValueValue
kendo-menu-button-arrow-padding-x$kendo-button-padding-yvar(--kendo-spacing-1, 0.25rem)Default: $kendo-button-padding-yComputed: var(--kendo-spacing-1, 0.25rem)
Description: The horizontal padding of the button arrow in the Menu Button..

Menu Variables

VariableDefault ValueComputed ValueValue
kendo-menu-popup-padding-xnullnullDefault: nullComputed: null
Description: Horizontal padding of the menu popup.
kendo-menu-popup-padding-ynullnullDefault: nullComputed: null
Description: Vertical padding of the menu popup.
kendo-menu-popup-border-width$kendo-popup-border-width1pxDefault: $kendo-popup-border-widthComputed: 1px
Description: Width of the border around the menu popup.
kendo-menu-popup-font-sizevar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)Default: var( --kendo-font-size, inherit )Computed: var(--kendo-font-size, inherit)
Description: Font sizes of the menu popup.
kendo-menu-popup-line-heightvar( --kendo-line-height, normal )var(--kendo-line-height, normal)Default: var( --kendo-line-height, normal )Computed: var(--kendo-line-height, normal)
Description: Line heights used along with $kendo-font-size.
kendo-menu-popup-bg$kendo-popup-bgvar(--kendo-color-surface-alt, #ffffff)Default: $kendo-popup-bgComputed: var(--kendo-color-surface-alt, #ffffff)
Description: The background of the menu popup.
kendo-menu-popup-text$kendo-popup-textvar(--kendo-color-on-app-surface, #3d3d3d)Default: $kendo-popup-textComputed: var(--kendo-color-on-app-surface, #3d3d3d)
Description: The text color of the menu popup.
kendo-menu-popup-border$kendo-popup-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))Default: $kendo-popup-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description: The border color of the menu popup.
kendo-menu-popup-gradientnullnullDefault: nullComputed: null
Description: The background gradient of the menu popup.
kendo-menu-popup-item-padding-xk-spacing(2)var(--kendo-spacing-2, 0.5rem)Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem)
Description: Horizontal padding of the menu item in popup.
kendo-menu-popup-item-padding-yk-spacing(1)var(--kendo-spacing-1, 0.25rem)Default: k-spacing(1)Computed: var(--kendo-spacing-1, 0.25rem)
Description: Vertical padding of the menu item in popup.
kendo-menu-popup-item-padding-endcalc( #{$kendo-menu-popup-item-padding-x} * 2 + #{$kendo-icon-size} )calc(var(--kendo-spacing-2, 0.5rem) * 2 + 16px)Default: calc( #{$kendo-menu-popup-item-padding-x} * 2 + #{$kendo-icon-size} )Computed: calc(var(--kendo-spacing-2, 0.5rem) * 2 + 16px)
Description: The end padding of the menu item in popup.
kendo-menu-popup-sm-item-icon-margin-start$kendo-menu-popup-sm-item-padding-xvar(--kendo-spacing-2, 0.5rem)Default: $kendo-menu-popup-sm-item-padding-xComputed: var(--kendo-spacing-2, 0.5rem)
Description: The start margin of the menu item expand icon.
kendo-menu-popup-sm-item-icon-margin-endcalc( -1 * (#{$kendo-menu-popup-sm-item-padding-end} - #{k-math-div( $kendo-menu-popup-sm-item-padding-x, 2 )}) )calc(-1 * (calc(var(--kendo-spacing-2, 0.5rem) * 2 + 16px) - var(--kendo-spacing-2, 0.5rem)/2))Default: calc( -1 * (#{$kendo-menu-popup-sm-item-padding-end} - #{k-math-div( $kendo-menu-popup-sm-item-padding-x, 2 )}) )Computed: calc(-1 * (calc(var(--kendo-spacing-2, 0.5rem) * 2 + 16px) - var(--kendo-spacing-2, 0.5rem)/2))
Description: The end margin of the menu item expand icon.
kendo-menu-popup-item-spacingk-spacing(0)var(--kendo-spacing-0, 0px)Default: k-spacing(0)Computed: var(--kendo-spacing-0, 0px)
Description: The spacing between the menu items in popup.
kendo-menu-popup-item-bgnullnullDefault: nullComputed: null
Description: The background of the menu item in popup.
kendo-menu-popup-item-textnullnullDefault: nullComputed: null
Description: The text color of the menu item in popup.
kendo-menu-popup-item-bordernullnullDefault: nullComputed: null
Description: The border color of the menu item in popup.
kendo-menu-popup-item-gradientnullnullDefault: nullComputed: null
Description: The background gradient of the menu item in popup.
kendo-menu-popup-item-hover-bg$kendo-list-item-hover-bgvar(--kendo-color-base-hover, #ebebeb)Default: $kendo-list-item-hover-bgComputed: var(--kendo-color-base-hover, #ebebeb)
Description: The background of hovered menu item in popup.
kendo-menu-popup-item-hover-text$kendo-list-item-hover-textvar(--kendo-color-on-app-surface, #3d3d3d)Default: $kendo-list-item-hover-textComputed: var(--kendo-color-on-app-surface, #3d3d3d)
Description: The text color of hovered menu item in popup.
kendo-menu-popup-item-hover-bordernullnullDefault: nullComputed: null
Description: The border color of hovered menu item in popup.
kendo-menu-popup-item-hover-gradientnullnullDefault: nullComputed: null
Description: The background gradient of hovered menu item in popup.
kendo-menu-popup-item-expanded-bg$kendo-list-item-selected-bgvar(--kendo-color-primary, #ff6358)Default: $kendo-list-item-selected-bgComputed: var(--kendo-color-primary, #ff6358)
Description: The background of expanded menu item in popup.
kendo-menu-popup-item-expanded-text$kendo-list-item-selected-textvar(--kendo-color-on-primary, #ffffff)Default: $kendo-list-item-selected-textComputed: var(--kendo-color-on-primary, #ffffff)
Description: The text color of expanded menu item in popup.
kendo-menu-popup-item-expanded-bordernullnullDefault: nullComputed: null
Description: The border color of expanded menu item in popup.
kendo-menu-popup-item-expanded-gradientnullnullDefault: nullComputed: null
Description: The background gradient of expanded menu item in popup.
kendo-menu-popup-item-focus-shadow$kendo-menu-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.12)Default: $kendo-menu-item-focus-shadowComputed: inset 0 0 0 2px rgba(0, 0, 0, 0.12)
Description: The base shadow of focused menu item in popup.