Menus & Overlays

Menus hide secondary actions behind a trigger, usually a 3-dot kebab icon, to keep interfaces clean. Tooltips explain what something does on hover without adding visual clutter. Use menus for actions too infrequent to deserve their own button: duplicate, export, archive, delete. Use tooltips for icon-only buttons that need a text label for accessibility. Style destructive actions like Delete in red with the menuItem--danger class. Place them at the bottom of the menu, separated by a divider.

Interactive Preview

Context Menu — Menu items preview

Status
Delete

Props

Show delete item

Show status submenu

Context Menu

Trigger (interactive)
Onboarding
Active
Click the 3-dot icon, then click "Status" to see the submenu
Main Menu
Status
Delete
Standard items + danger item with red text
Status Submenu
Draft
Active
Paused
Archived
Opens from "Status ›". Selected item highlighted in primaryLight
Property
Value

Min width

160px

Border radius

8pxradiusMd

Shadow

0 4px 12px rgba(0,0,0,0.12)shadow.dropdown

Border

1px solid #E2E2E4gray200

Item font

14px
·500

Item icon

16px

Item padding

vertical8px
·horizontal16px

Selected item bg

#FDEEE8primaryLight

Danger item

text#EF4444danger
·hover bg#FEE2E2dangerLight

Tooltip

Hover the icon to see the tooltip

Property
Value

Background

#12284Cnavy

Text color

#FFFFFF

Border radius

4pxradiusSm

Font size

12px

Code

Context menu
<Menu
  anchorEl={anchorEl}
  open={Boolean(anchorEl)}
  onClose={handleClose}
>
  <MenuItem onClick={handleStatus}>
    <ListItemText>Status</ListItemText>
    <ChevronRightIcon />
  </MenuItem>
  <Divider />
  <MenuItem
    onClick={handleDelete}
    className="menuItem--danger"
  >
    <ListItemIcon>
      <DeleteIcon fontSize="small" />
    </ListItemIcon>
    <ListItemText>Delete</ListItemText>
  </MenuItem>
</Menu>
Tooltip
<Tooltip title="More options" placement="top" arrow>
  <IconButton>
    <MoreVertIcon />
  </IconButton>
</Tooltip>
Inputs & FormsNavigation