Contextual Menu Outlets

Updated:

How to use q2-dropdown as a contextual menu outlet for dynamically resolved extension actions.

Contextual menu outlets allow extensions to contribute action items to dropdown menus within a platform. When a user interacts with a contextual menu (e.g., the actions dropdown on an account card), the outlet resolves which extensions should contribute menu items based on the current context.

How Contextual Menu Outlets Work

Contextual menu outlets use the <q2-dropdown> Tecton element. Unlike other outlet types that render extensions in iframes, contextual menu outlets resolve extension-provided actions as dropdown items. The <q2-dropdown> element has outlet-aware properties that enable context-based resolution:

Property Type Description
context string The context type (e.g., Account::Q2Account). Tells the outlet what kind of data is being displayed.
contextValue string The context value (e.g., an account ID). Passed to the resolution logic.
resolvedType string The resolved subtype (e.g., Checking). Used for filtering items by type.
additionalContext string Additional context data for granular filtering (e.g., product ID).
<q2-dropdown> is the only Tecton element that supports the contextual menu outlet pattern. <q2-select> does not have outlet-aware properties and cannot be used for this purpose.

Configuring an Extension into a Contextual Menu Outlet

To add items to a contextual menu outlet, your extension's configuration must include menu item declarations in the appropriate outlet configuration. The Tecton CLI's Dropdown Navigation Configuration option can assist with some dropdown configurations.

Menu items are defined in the extension's configuration file under the appropriate outlet key:

ACCOUNT_DETAILS_DROPDOWN = [
    {
        'itemLabel': 'View Rewards',
        'action': 'navigateTo',
        'modules': [{'moduleName': 'RewardsDetail'}],
        'contextIdParamName': 'accountId'
    }
]

The contextIdParamName specifies which parameter name should be used to pass the context value to the extension when the menu item is selected.

Where Contextual Menu Outlets Exist

In UUX, contextual menu outlets are used in several locations:

  • Account Details page — Actions dropdown for the current account (AccountDetails.main.dropdown)
  • Transaction Details — Actions for individual transactions (AccountDetails.main.transactions)
  • Landing Page — Account card dropdowns (LandingPage.main.accountDropdown)
  • Manage Accounts — Row-level actions (Accounts.Accounts.accountDropdown)

Platform Implementation

Platform implementers add contextual menu outlets using <q2-dropdown> with the outlet-aware properties:

<q2-dropdown
    name={{dropdownName}}
    context={{dropdownContext}}
    contextValue={{dropdownContextValue}}
    resolvedType={{dropdownResolvedType}}
    additionalContext={{dropdownAdditionalContext}}
>
    <!-- Platform-provided menu items -->
    <q2-dropdown-item value="details">View Details</q2-dropdown-item>
    
    <!-- Extension-provided items are dynamically added by the outlet resolution system -->
</q2-dropdown>

The outlet resolution system matches the dropdown's context against extension configurations and dynamically adds menu items contributed by extensions.

Context Filtering

Like tab outlets, contextual menu outlets support context filtering. An extension can configure its menu items to appear only for specific account or transaction types. For details on context types and filtering, see UUX Content Controls.