Skip to main content

Menu

Use a menu to display a list of actions in a popover. Actions can open a modal, trigger an event, or link to an external page.

Support
Targets (24)

Supported targets

  • customer-account.footer.render-after
  • customer-account.order-index.announcement.render
  • customer-account.order-index.block.render
  • customer-account.order-status.announcement.render
  • customer-account.order-status.block.render
  • customer-account.order-status.cart-line-item.render-after
  • customer-account.order-status.cart-line-list.render-after
  • customer-account.order-status.customer-information.render-after
  • customer-account.order-status.fulfillment-details.render-after
  • customer-account.order-status.payment-details.render-after
  • customer-account.order-status.return-details.render-after
  • customer-account.order-status.unfulfilled-items.render-after
  • customer-account.order.action.menu-item.render
  • customer-account.order.action.render
  • customer-account.order.page.render
  • customer-account.page.render
  • customer-account.profile.addresses.render-after
  • customer-account.profile.announcement.render
  • customer-account.profile.block.render
  • customer-account.profile.company-details.render-after
  • customer-account.profile.company-location-addresses.render-after
  • customer-account.profile.company-location-payment.render-after
  • customer-account.profile.company-location-staff.render-after
  • customer-account.profile.payment.render-after

Anchor to propertiesProperties

Anchor to accessibilityLabel
accessibilityLabel
string

A label to describe the purpose of the menu that is announced by screen readers.

Anchor to id
id
string

A unique identifier for the element.

Anchor to children button propertiesChildren button properties

The Menu component exclusively accepts Button elements with restricted props as its children. The tone prop will always be set to monochrome by default.

Anchor to accessibilityLabel
accessibilityLabel
string

A label that describes the purpose or contents of the Button. It will be read to users using assistive technologies such as screen readers.

Use this when using only an icon or the button text is not enough context for users using assistive technologies.

Anchor to click
click
((event: <typeof buttonTagName>) => void) | null

Callback when the button is activated. This will be called before the action indicated by type.

Anchor to command
command
'--auto' | '--show' | '--hide' | '--toggle' | '--copy'
Default: '--auto'

Sets the action the commandFor should take when this clickable is activated.

See the documentation of particular components for the actions they support.

  • --auto: a default action for the target component.
  • --show: shows the target component.
  • --hide: hides the target component.
  • --toggle: toggles the target component.
  • --copy: copies the target ClipboardItem.
Anchor to commandFor
commandFor
string

ID of a component that should respond to activations (e.g. clicks) on this component.

See command for how to control the behavior of the target.

Anchor to disabled
disabled
boolean
Default: false

Disables the button, disallowing any interaction.

Anchor to href
href
string

The URL to link to.

  • If set, it will navigate to the location specified by href after executing the onClick callback.
  • If a commandFor is set, the command will be executed instead of the navigation.
Anchor to id
id
string

A unique identifier for the element.

Anchor to loading
loading
boolean
Default: false

Replaces content with a loading indicator.

Anchor to target
target
'auto' | '_self' | '_blank'
Default: 'auto'

Specifies where to display the linked URL

Anchor to tone
tone
'auto' | 'neutral' | 'critical'
Default: 'auto'

Sets the tone of the Button, based on the intention of the information being conveyed.

Anchor to type
type
'button' | 'submit'
Default: 'button'

The behavior of the button.

  • 'submit' - Used to indicate the component acts as a submit button, meaning it submits the closest form.
  • 'button' - Used to indicate the component acts as a button, meaning it has no default action.
  • 'reset' - Used to indicate the component acts as a reset button, meaning it resets the closest form (returning fields to their default values).

This property is ignored if the component supports href or commandFor/command and one of them is set.

Examples
<>
<s-button commandFor="order-actions-menu">
Manage
</s-button>

<s-menu
id="order-actions-menu"
accessibilityLabel="List of order actions"
>
<s-button>Submit problem</s-button>
<s-button>Request return</s-button>
<s-button tone="critical">Cancel order</s-button>
</s-menu>
</>

Preview

An example of a Menu component shows three actions: Submit problem, Request return, and Cancel order.

Anchor to best-practicesBest practices

Use these best practices to deliver a clear and accessible experience in your extensions.

Place menus consistently

Position menus in the upper‑right of full‑page extensions to match account pages like order status.

Group page‑level actions

Keep related actions in a single menu rather than scattering buttons across the page.

Limit items to what’s relevant

Include only actions that matter for the current page to reduce decision fatigue.

Order by frequency and risk

List the most common or least risky actions at the top so they’re easy to reach.

Write concise, action‑first labels

Use short labels (ideally two words) that start with a verb, use sentence case, avoid filler articles, and clearly state the outcome.

Anchor to relatedRelated

ComponentPopover
Was this page helpful?