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

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)
NameAgePositionOfficeSalaryAvailability
John Wicker38HitmanLondon833 000Available
John Wicker38HitmanLondon833 000Available
Expandable38HitmanLondon833 000Available
John Wicker38HitmanLondon83312 000Available

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

2px dotted outline with 2px outline-offset with color 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