Overview
The Group is a unique element within the menu-button widget that serves two main purposes:
- Delimit exclusive single selection within a group of items.
- Provide a label acting for a group of menu items that helps to organize the menu structure.
Design
Box Model
This composable uses most of the visual styles from the Basic Activation [Composable]. It includes the following styles that define it's unique purpose in the menu.
- Group Text Label: "b3-strong" (this requires a new typography variant)
Responsive
Same as the standard menu item
States
| State | Default Graphic | Default Styling |
|---|---|---|
| Idle |  | background: neutral-000 (#FFFFFF) font: b3-strong (12px, semi-bold, neutral-700) - new variant font-color: neutral-700 (#353C46) |
| Focus | N/A | N/A |
| Disabled | N/A | N/A |
| Read-only | N/A | N/A |
| Hover | N/A | N/A |
| Error | N/A | N/A |
Use Cases
| Original Scenario | Dimsum's version | Scenario Description |
|---|---|---|
 |  | Activation Menu with Group Label and Separator shown with Group Label and Separator used in a Page Header Toolbar (triggered from a filled toggle button) |
Examples
| Scenario Graphic | Scenario Solution | Text Resize and Reflow (200%) | Scenario Description |
|---|---|---|---|
 |  |  | Menu with Group Label an element who's purpose is to delimit single selection within a group of items. It is placed at the top of a group of menu items acting as a label for related items, helping to organize the menu structure. |
Digital Accessibility
There are no related A11y concerns.
Variants
Not applicable
Usage Warnings
If multiple groups are used within the same menu, it may indicate that too many actions are at the same level or that item relationships are unclear. This should prompt a reconsideration of whether the menu-button widgetis the right choice or if another component (or hierachy via submenus) is more appropriate.
A key limitation is that nesting groups is not allowed. While not an HTML restriction, this best practice avoids user confusion. If nested groups seem necessary, consider using a with submenu item instead.
When a label is included, the widget automatically ensures that the group is announced correctly by screen readers, with the group being announced when the first focusable element within it is focused.
Reference
Not applicable