SMenu <s-menu>

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

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 contents of the element. When set, it will be announced using assistive technologies and provide additional context.
id	string	A unique identifier for the element.

Slots

Slot	Description
default	The Menu items. Only accepts Button and Section components.