Overview
Activation with Submenu menu item introduces a hierarchical structure within the menu-button widget. This type of menu item acts as a parent to a submenu, which can contain any of the eight other valid menu items. It provides a right facing chevron serves the purpose of providing visual feedback about the presence of a (sub)menu spawning from the given "submenu" menu item.
The (sub)menu content can contain any of the documented composable menu-items but because they now live under a "sub" menu, a semantic hierarchical relationship between menu items is from this point forward established between different depth levels and both design and functionality MUST ensure and enforce meaningful hierarchical treatment.
Design
Box Model
Configurations
With Left Decorator
With Secondary Label
With All
This composable uses all the visual styles from the Basic Activation [Composable], and may also include any of the following according to the use case and requirements.
- Submenu "Right Chevron": 16x16 RT
Responsive
Same as the standard menu item
States
| State | Default Graphic | Default Styling |
|---|---|---|
| Idle |  | icon-arrow-lrg-right: brand-800 (#005181) |
 | left-icon-color: brand-800 (#005181) | |
 | secondary-label-font: b4 font-color: brand-800 (#005181) - new variant font-style: italic - new variant | |
 | N/A | |
| Focus |  | background: brand-200 (#EBF6FF) border: 1px solid brand-500 (#1394E5) |
 | N/A | |
 | N/A | |
 | N/A | |
| Disabled |  | font-color: neutral-500 (#697489) - new variant cursor: disabled |
 | left-icon-color: neutral-400 (#8C93A6) | |
 | secondary-label-font: b4 font-style: italic - new variant | |
 | N/A | |
| Hover |  | background: brand-200 (#EBF6FF) |
 | N/A | |
 | N/A | |
 | N/A | |
| Read-only | N/A | N/A |
| Error | N/A | N/A |
| When submenu is open (Parent is highlighted) | | background: brand-200 (#EBF6FF) |
 | N/A | |
 | N/A | |
 | N/A |
Use Cases
| Original Scenario (Use Case) | Dim Sum Version (Proposed Solution with DS Components) | Scenario Description |
|---|---|---|
 |   | Top: Navigation Menu with (Sub)Menu Shown in a Page Header. The current selection and default menu items are marked with a Secondary Label 'Current and Default'. Bottom: Activation Menu Shown moved out of the Navigation Menu, relocated to the Toolbar. This separates the two different semantic roles from co-mingling different functionalities. |
Examples
| Scenario Graphic | Scenario Solution | Text Resize and Reflow (200%) | Scenario Description |
|---|---|---|---|
 |  |  | Activation Menu with (Sub)Menu menu with a right facing chevron serves the purpose of providing visual feedback about the presence of a (sub)menu spawning from the given "submenu" menu item. |
Digital Accessibility
Same as the standard menu item
Variants
Not applicable
Usage Warnings
The introduction of this hierarchy is a key characteristic, and it carries significant design implications.
When using the with submenu item, designers must carefully consider the hierarchical relationships between the parent item and its submenu items.The parent-child relationship MUST be logical and semantically meaningful. Failing to establish clear relationships can lead to a confusing user experience, both for users with and without disabilities.
Beyond the need for careful design to ensure logical hierarchy, the with submenu item functions similarly to other menu items, without additional pitfalls to consider.
Reference
Not applicable