canonical / canonical/vanilla-framework

[Component amendment]: Contextual menu

Open
#5,547 3 comments 0 reactions 0 assignees View on GitHub
Priority: Medium Tier: Global WG: Validated
Dominant language
HTML
Stars
983
Forks
216
Avg merge
3d 13h
Merged PRs (30d)
3

Description

## Component/pattern to amend

Contextual menu

## Visual

![Image](https://github.com/user-attachments/assets/fd56586b-1f4c-4daf-8d00-f9bbced91c48)

## 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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.