Overview

Single Activation with Submenu menu item is a pre-composed and orchestrated component that unifies the semantics and behaviors of "single selection" composable and "submenu" composable.

Most of the concerns and design choices of this composition must be inherited and expanded from the two other composables, with particular attention to how the selection behaves with the sub-menu hierarchy to maintain and guarantee semantic behavioral hierarchical interactions.

It's important to note, deselecting a menu item automatically deselects ANY selection at any depth of the sub-tree.

---

Design

Box Model

Configurations

With Left Region

With Secondary Label

With All Configurations

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.

Single Select Region (Dot Icon)

• Color brand-800 (#005181)
  Uses the standard brand design system color and visual styling that offers sufficient contrast to delineate it as a distinct selection element for a menu item.
• Height & Width (Dot) 8x8px RT, (Box) 16x16px RT
  Uses the standard design system sizing for visual consistency and alignment throughout applications.
• Padding-x 8px (dictated)
  The single select region has a left placement of the menu item and left position to the primary label and left agnostic region. It has pre-built spacing to dictate the proper distance between the primary label or agnostic left region.

Submenu Region (Right Chevron)

• Color brand-800 (#005181)
  Uses the standard brand design system color and visual styling that offers sufficient contrast to delineate it as a distinct selection element for a menu item.
• Height & Width 16x16px RT
  Uses the standard design system sizing for visual consistency and alignment throughout applications.
• Padding-x 8px (dictated)
  The submenu region has a right placement of the menu item and right position to the primary and secondary labels. It has pre-built spacing to dictate the proper distance between labels and the (sub)menu.

Responsive

This composable uses the Standard Menu responsive behavior.

States

Use Cases

Examples

Digital Accessibility

This composable has no known-of related A11y concerns.

---

Variants

This composable has no known-of variants.

---

Usage Warnings

These MUST be used sparingly due to their potential to violate WCAG standards and include strict embedded limitations on behaviors to prevent such violations. Ensuring clear grouping, hierarchy, and appropriate use of items guarantees an accessible and user-friendly experience.

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

This composable has no known-of references.