Black Lives Matter. Support the Equal Justice Initiative.
Skip to main contentCarbon Design System

Overflow menu

Color

ClassPropertyColor token
.bx--overflow-menu__iconfill$icon-01
.bx--overflow-menu-optionsbackground-color$ui-01
.bx--overflow-menu-options__btncolor$text-02
.bx--overflow-menu-options__option--dangerbackground-color$support-01
.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$hover-ui
option:hoverbackground-color$hover-row
option:hovertext color$text-01
option--danger:hoverbackground-color$hover-danger
option:disabledtext color$disabled-02
Overflow menu text hover example

Text and warning hover examples for overflow menu

Typography

Overflow menu text should be set in 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