Extensions

Creating Dropdown Outlets

Updated:

How to implement a q2-dropdown as a contextual menu outlet in your platform.

Contextual menu outlets allow extensions to contribute action items to dropdown menus within a platform. When a user opens a contextual menu (e.g., an 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> element with outlet-aware properties. Unlike tab or feature outlets that render extensions in iframes, contextual menu outlets resolve extension-provided actions as dropdown items that trigger navigation or other actions when selected.

<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.

Adding the Element

Add <q2-dropdown> to your platform template with the outlet-aware properties. Platform-provided items can sit alongside dynamically resolved extension items:

<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 inserts menu items contributed by extensions.

Outlet-Aware Properties

Property
Type
Description
name
string
The outlet path identifier. Extensions reference this to register menu items.
context
string
The context type (e.g., Account::Q2Account). Tells the outlet what kind of data is being displayed.
contextValue
string
The current context value (e.g., an account ID). Passed to the resolution logic and on to the extension.
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).

Where Contextual Menu Outlets Are Used in UUX

In UUX, contextual menu outlets appear 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)

Context Filtering

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

For information on how extension developers configure their extensions to contribute items to a contextual menu outlet, see Loading Into Dropdowns.