Skip to main contentCarbon Design System

Overflow menu

Color

ClassPropertyColor token
.bx--overflow-menu__iconfill$icon-primary
.bx--overflow-menu-optionsbackground-color$layer
.bx--overflow-menu-options__btncolor$text-secondary
.bx--overflow-menu-options__option--dangerbackground-color$layer
.bx--overflow-menu-optionsbox-shadow0 2px 6px 0 rgba(0, 0, 0, 0.3)

Interactive states

ClassPropertyColor token
.bx--overflow-menu:focusborder$focus
option:focusborder$focus
.bx--overflow-menu:hoverbackground-color$background-hover
option:hoverbackground-color$layer-hover
option:hovertext color$text-primary
option--danger:hoverbackground-color$button-danger-hover
option:disabledtext color$text-disabled
Overflow menu text hover example

Text and warning hover examples for overflow menu

Typography

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

PropertyFont-size (px/rem)Font-weightType token
.bx--overflow-menu-options__btn14 / 0.875Regular / 400$body-short-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.

ClassPropertypx / remSpacing token
.bx--overflow-menu__iconicon size16 x 16px–
.bx--overflow-menu-options__btnpadding-right, padding-left16 / 1$spacing-05
.bx--overflow-menu-optionsheight32 / 2–
.bx--overflow-menu-options__option--dangerborder-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