Skip to main contentCarbon Design System

Overflow menu

Color

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.

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-hover
Menu option:disabledtext color$text-disabled
Overflow menu text hover example

Text and warning hover examples for overflow menu

Typography

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

Structure

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
Dividerborder-top1px
Structure and spacing measurements for an overflow menu

Sizes

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