SMenu <s-menu>

A list of actions shown in an overlay, opened from a button. SMenu is the typed Vue 3 wrapper for Shopify's Polaris <s-menu> web component.

import { SMenu } from 'polaris-vue-elements'

Best practices

• Use menus for secondary actions. Keep primary actions like "Save" visible in the page itself. Menus suit actions merchants use less often or destructive ones, such as "Archive" or "Export data", that don't need permanent space.
• Write labels as a verb plus a noun. Labels like "Edit details" or "Export as CSV" say exactly what happens; avoid vague ones like "Options", "More" or "Settings".
• Split longer menus into sections. Once a menu has four or more items, group related actions in an SSection with a heading, for example "Manage" for everyday actions and "Danger zone" for destructive ones.
• Add icons that support the label. Icons like edit for editing, delete for deleting or download for exporting help merchants recognize an action, but they should reinforce the text, never stand in for it.
• Disable only what's unavailable for now. Set disabled on an item when the action doesn't apply in the current context, like refunding an order that's already refunded. If an action never applies, leave it out of the menu.

<SButton commandFor="product-actions">Product actions</SButton>
<SMenu id="product-actions" accessibilityLabel="Product actions">
  <SSection heading="Manage">
    <SButton icon="edit">Edit product</SButton>
    <SButton icon="duplicate">Duplicate product</SButton>
  </SSection>
  <SSection heading="Danger zone">
    <SButton icon="archive">Archive product</SButton>
    <SButton icon="delete" tone="critical">Delete product</SButton>
  </SSection>
</SMenu>

See Shopify's best practices for <s-menu> for the full guidance.

Example

ActionsEditDuplicateDelete

<script setup>
import { SButton, SMenu, SSection } from 'polaris-vue-elements'
</script>

<template>
  <!-- SMenu only accepts Button and Section elements in its default slot; it's
       activated the same way as SPopover, via commandFor/command on a trigger. -->
  <SButton commandFor="example-menu" command="--toggle">Actions</SButton>

  <SMenu id="example-menu" accessibilityLabel="Actions menu">
    <SSection heading="Manage">
      <SButton variant="tertiary">Edit</SButton>
      <SButton variant="tertiary">Duplicate</SButton>
    </SSection>
    <SSection heading="Danger zone">
      <SButton variant="tertiary" tone="critical">Delete</SButton>
    </SSection>
  </SMenu>
</template>

Props

Prop	Type	Description
accessibilityLabel	string	A label that describes the purpose or content of the component for assistive technologies like screen readers. Use this to provide additional context when the visible content alone doesn't clearly convey the component's purpose.
id	string	A unique identifier for the element.

Slots

Slot	Description
default	The items displayed within the menu. Only accepts button and section components. Use button for individual menu actions and section to group related items.