Back to components

Contextual Menu

A Contextual Menu is a menu to gather options for a context, or when navigational control are truncated.

Table of Contents

Edit this section, Opens in new window

Overview

There is currently no documentation for this section yet. However, there might be some more documentation after this section.
Contact the Design System team, Opens in new window for questions.

If you want to contribute, you can also add the documentation yourself!, Opens in new window

Edit this section, Opens in new window

Usage

Contextual Menu is used for actions related to the current context, or when additional options are available to the user and there is a space constraint.

Positioning

Depending on where the Contextual Menu appears within the UI, the menu may be left or right aligned so the Contextual Menu is clearly visible.

In tables

When used inside a table cell in a table. We use a horizontal icon, filled with BL 1, BLUE. We've also decreased the height and width to fit it better in the table row layout.

Performing actions on 4 item(s)
Name Age Position Office Salary Availability
John Wicker 38 Hitman London 833 000 Available
John Wicker 38 Hitman London 833 000 Available
Expandable 38 Hitman London 833 000 Available
John Wicker 38 Hitman London 83312 000 Available

Levels

The Contextual Menu can only have ONE level.

Do not use more than one level for Contextual Menu
Only use one level for Contextual Menu
Edit this section, Opens in new window

Behaviours

Interactions

Hover

Hover

When hovered, the menu item is filled with BE 1, DARK BEIGE.

Focus

Focus

3px outline with 1px outline-offset with color BL 1, BLUE Complement, a direct complement color of BL 1, BLUE.

Edit this section, Opens in new window

Anatomy

Contextual Menu
  1. Contextual Menu trigger
  2. Contextual Menu
Edit this section, Opens in new window

Specs

Contextual Menu
Edit this section, Opens in new window
Contact us, Opens in new window