Skip to main content

Menu

The menu component displays a list of actions that can be performed on a resource or within a specific context. Use menu to present multiple related actions in a compact dropdown format, reducing visual clutter while maintaining discoverability.

Menus support action grouping and keyboard navigation for efficient interaction.

Menu accepts only s-button elements as direct children, and doesn't support nested submenus. All actions appear in a single flat list.

Support
Targets (24)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the menu component.

Anchor to accessibilityLabel
accessibilityLabel
string

A label that describes the purpose of the menu for users of assistive technologies such as screen readers. Use this to provide context about the available actions, such as "Order actions" or "Account settings."

Anchor to id
id
string

A unique identifier for the element. Use this to target the element with CSS, JavaScript, or accessibility attributes. The id must be unique within the document.

Anchor to Menu itemMenu item

Configure the following properties on buttons placed inside the menu component.

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 target should take when this component is activated.

  • --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 clipboard item.

Learn more about the command attribute.

Anchor to commandFor
commandFor
string

The ID of the component to control when this component is activated. Pair with the command property to specify what action to perform on the target component. Learn more about the commandFor attribute.

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': Submits the nearest containing form.
  • 'button': Performs no default action, relying on the click event handler for behavior.

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

Anchor to ExamplesExamples

Anchor to Add order management actionsAdd order management actions

Display a menu with actions for managing an order. This example shows an s-menu with buttons for submitting a problem, requesting a return, and canceling an order.

Add order management actions

A dropdown menu component with a trigger button and list of action items.

html

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

Anchor to Organize items into sectionsOrganize items into sections

Organize menu items into labeled sections. This example shows an s-menu with s-section headings separating help resources from support options.

html

<s-button commandFor="help-menu">
Help
</s-button>

<s-menu id="help-menu" accessibilityLabel="Help options">
<s-section heading="Resources">
<s-button href="https://help.shopify.com" target="_blank">Visit help center</s-button>
<s-button href="https://community.shopify.com" target="_blank">Community forums</s-button>
</s-section>
<s-section heading="Support">
<s-button>Contact support</s-button>
</s-section>
</s-menu>

Anchor to Add a critical action to a menuAdd a critical action to a menu

Use a menu to group subscription management actions, including a critical action. This example shows a secondary button that opens a menu with actions for managing a subscription.

html

<s-button
variant="secondary"
accessibilityLabel="Subscription actions"
commandFor="subscription-menu"
>
Actions
</s-button>

<s-menu id="subscription-menu" accessibilityLabel="Subscription actions">
<s-button>Skip next order</s-button>
<s-button>Change frequency</s-button>
<s-button tone="critical">Cancel subscription</s-button>
</s-menu>

Anchor to Best practicesBest practices

  • Place menus consistently: Position menus in the upper-right of full-page extensions to match account pages like order status.
  • Group related 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 labels: Use short labels that start with a verb and use sentence case, such as "Edit address" or "Cancel order."
Was this page helpful?