Choose a version:

__@overlayHidden@5651
```
boolean
```
accessibilityLabel
A label that describes the purpose or contents of the element. When set, it will be announced using assistive technologies and provide additional context.
```
string
```
adoptedCallback
```
() => void
```
attributeChangedCallback
```
(name: string) => void
```
click
Like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`. For example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.
```
({ sourceEvent }?: ClickOptions) => void
```
connectedCallback
```
() => void
```
disconnectedCallback
```
() => void
```
queueRender
Queue a run of the render function. You shouldn't need to call this manually - it should be handled by changes to @property values.
```
() => void
```
setAttribute
```
(name: string, value: string) => void
```

declare class Menu extends PreactOverlayElement implements MenuProps {
  accessor accessibilityLabel: string;
  constructor();
  /** @private */
  connectedCallback(): void;
  /** @private */
  disconnectedCallback(): void;
}

ClickOptions

sourceEvent
The event you want to influence the synthetic click.
```
ActivationEventEsque
```

export interface ClickOptions {
  /**
   * The event you want to influence the synthetic click.
   */
  sourceEvent?: ActivationEventEsque;
}

ActivationEventEsque

button
```
number
```
ctrlKey
```
boolean
```
metaKey
```
boolean
```
shiftKey
```
boolean
```

export interface ActivationEventEsque {
  shiftKey: boolean;
  metaKey: boolean;
  ctrlKey: boolean;
  button: number;
}

Was this section helpful?

Code

<s-button commandFor="customer-menu">Edit customer</s-button>

<s-menu id="customer-menu" accessibilityLabel="Customer actions">

<s-button icon="merge">Merge customer</s-button>

<s-button icon="incoming">Request customer data</s-button>

<s-button icon="delete">Delete customer</s-button>

</s-menu>

examples

Code

<s-button commandFor="customer-menu">Edit customer</s-button>

<s-menu id="customer-menu" accessibilityLabel="Customer actions">
  <s-button icon="merge">Merge customer</s-button>
  <s-button icon="incoming">Request customer data</s-button>
  <s-button icon="delete">Delete customer</s-button>
</s-menu>

<!DOCTYPE html><html><head><style>html, body {height:100%} body {box-sizing: border-box; margin: 0; padding:0.5rem; display: grid; place-items: start center; gap: 0.5rem;}</style><script src="https://cdn.shopify.com/shopifycloud/app-bridge-ui-experimental.js"></script></head><body><div><s-button commandFor="customer-menu">Edit customer</s-button>

<s-menu id="customer-menu" accessibilityLabel="Customer actions">
  <s-button icon="merge">Merge customer</s-button>
  <s-button icon="incoming">Request customer data</s-button>
  <s-button icon="delete">Delete customer</s-button>
</s-menu>
</div></body></html>

Menu

Anchor to propertiesProperties

Menu

ClickOptions

ActivationEventEsque

Code

examples

Code

Preview