Status
The contextual menu component can adopt different status depending on user requirements and its slot (see anatomy of the contextual menu).
Slot behaviors
The component chosen in the slot section follow its own status: (active, hovered, disabled, …)
- Active/Default: The component to active the contextual menu is active and is actionable.
- Hovered (optional): This status only concerned component with an “hovered” status as button.
- Disabled (optional): The contextual menu can’t be opened.
Drop behaviors
|
Drop opened When the user clicks or hovers over the slot (see events) |
|
|
Drop opened > Default item hovered
|
|
|
Drop opened > Danger item |
|
|
Drop opened > Danger item hovered |
|
|
Drop opened > Disabled item/section |
|
|
Drop opened > Hovered disabled item/section |
|
|
Drop opened > Disabled danger item |
|
|
Drop opened > Hovered disabled danger item |
|
Placement
The drop element can be placed all around the slot according to the limit of the screen. By default, it has to be placed at the bottom-left position.
Events
You have two options for activating the component, the choice between them depend of the usage context:
- On click: The drop element appears when user clicks on the slot and disappears when it clicks on an option/action or outside of the drop.
- On mouseover: The drop part appears and stays visible when the user hovers over the slot and the drop part. It disappears when the user clicks on an option or when the mouse leaves the drop part.
Size and responsive behaviors
The size of the drop is limited.
- Its width cannot be less than 170px and exceed 300px.
- It's height is limited to 20 items.
- Long texts are truncated. We can't have a text of two lines.
