Contextual menu

Contextual menu is used to provide a list of actions and links that can be used to perform an action or navigate.

Ready to use
Show details
Ready to use
Published: July 23, 2024
Updated: July 23, 2024

Figma component

Includes a link to a Figma component that has been imported to Supernova

Light mode

Light mode

Dark mode

Dark mode

Anatomy

The contextual menu is composed of a :

  • Slot: button, avatar or other component… To activate and deactivate the drop part. The slot is always displayed whatever the drop’s status.
  • Drop element: It’s the main part of the component. According to its status, it can be the All its different items (default, danger, section) are listed, here with a maximum list of 20 items.

Default item

It's the content item by default. It can be a link or an action and be provided with or without icon.

 

Danger item

It has the same anatomy as the default element and can also be provided with or without an icon.

 

Title, description and separator

Their form and anatomy are very simple and allow to create hierarchy.