Overview

Activation is the simplest and most commonly used menu item in the menu-button widget. It should be the default choice in most scenarios due to its straightforward nature. This simplicity makes it highly reliable, as it minimizes the risk of edge case semantic issues during the design process.

As a basic, clickable option, the Activation item triggers direct action directly changing page content without any additional layers or interactions (e.g., hierarchy or selection behavior). This item type should be favored whenever possible to maintain simplicity and alignment with accessibility standards.

---

Design

Box Model

The primary label by design is an opinionated configuration and has forced styling and alignment. It has a left placement of the text that grows to the right and is forced to wrap to accommodate additional labels that are displayed in full length.

Configurations

With Left Decorator

The menu item can have an agnostic region on the left side of the menu item. It has pre-built spacing to allow for enough distance between the primary label, but still within close proximity to maintain the relationship. This region can be used for a decorative element to provide better understanding of various actions to be taken.

With Secondary Label

The secondary label by design is an optional opinionated configuration and has forced styling and alignment. It has a right placement of the text that grows to the left, and pre-built spacing to always maintain sufficient space between the primary label.

The secondary label never wraps and is always displayed in it's full length to take as much space as it needs. This forces the primary label to wrap to accommodate it. Secondary labels should be used sparingly and only for text strings that are short and concise. Authors are in charge of ensuring the primary and secondary relationship through the display of content.

With All

Showing all configurations used together.

This composable uses all the visual styles from the Standard Menu, and may also include any of the following according to the use case and requirements.

• Primary Text Label: "b2" (Typography Variant)
• Secondary Text Label (Optional): "b4" (New Typography Variant)
• Background: neutral-000 (#FFFFFF)
• Margin / Padding: Left / Right 16px, Top / Bottom 8px
• Min-Height: 32 RT
• Min-Width: Stretches to fit content
• Max-Width: Stretches to fit parent

Responsive

Same as the standard menu item

States

Use Cases

Examples

Digital Accessibility

Same as the standard menu item

---

Variants

Not applicable

---

Usage Warnings

Same as standard

---

Reference

Not applicable