canonical / canonical/vanilla-framework
[Component amendment]: Contextual menu
- Dominant language
- HTML
- Stars
- 983
- Forks
- 216
- Avg merge
- 3d 13h
- Merged PRs (30d)
- 3
Description
## Component/pattern to amend
Contextual menu
## Visual

## Context
This amendment improves clarity and consistency in contextual menus by:
- Allowing optional **icons** alongside menu items to provide additional visual context for actions, following the same principles used in button groups. Icons are not required but can be included by designers when they enhance meaning.
- Supporting **semantic colors**, specifically red, for destructive actions. When a menu item represents a destructive action (e.g., delete or remove), both the icon and text should appear in red to help users quickly recognize the potential impact and avoid accidental activation.
This change provides more flexibility to designers while preserving consistency across components. It also aligns contextual menus with other components like buttons, which already support icon usage and semantic color styling.
These updates were discussed and agreed on in recent design meetings and are now being proposed for formal inclusion in the design system.
Contributor guide
Research direction
Locate the Contextual menu component and review how button groups handle icons and semantic colors. Implement optional icons and red styling for destructive items, ensuring both the icon and text use the destructive color. Done means the component supports these variants consistently with the agreed visual design.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, html, sass
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100