Skip to main contentCarbon Design System

Overflow menu


ElementPropertyColor token
Overflow menu iconfill$icon-primary
Menu optionbackground-color$layer *
text color$text-secondary
Danger optionbackground-color$layer*
Containerbox-shadow0 2px 6px 0 rgba(0, 0, 0, 0.3)

* Denotes a contextual color token that will change values based on the layer it is placed on.

An example of an overflow menu

Interactive states

ElementPropertyColor token
Icon button:focusborder$focus
Menu option:focusborder$focus
Icon button:hoverbackground-color$background-hover
Menu option:hoverbackground-color$layer-hover *
text color$text-primary
Danger option:hoverbackground-color$button-danger-primary
Menu option:disabledtext color$text-disabled
Interactive states for overflow menu


Overflow menu option text should be set in sentence case with the first letter of the first word capitalized.

ElementFont-size (px/rem)Font-weightType token
Menu option text14 / 0.875Regular / 400$body-compact-01


The height of an overflow menu is determined by the amount of content in the menu. The overflow menu icon can be found in the icons library.

ElementPropertypx / remSpacing token
Iconicon size16 x 16px
Menu optionpadding-right, padding-left16 / 1$spacing-05
Structure and spacing measurements for an overflow menu


ElementSizeHeight (px/rem)
Menu optionsSmall (sm)32 / 2
Medium (md)40 / 2.5
Large (lg)48 / 3
Icon buttonSmall (sm)32 / 2
Medium (md)40 / 2.5
Large (lg)48 / 3
Sizes for overflow menu

Sizes for menu options and icon button | px / rem