Menu

Examples

• Code

  jsx

  <>
    <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" tone="critical">
        Delete customer
      </s-button>
    </s-menu>
  </>

  html

  <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" tone="critical">Delete customer</s-button>
  </s-menu>
  

• Basic Menu

  Description

  Demonstrates a simple menu with basic action buttons and shows how to link it to a trigger button.

  jsx

  <>
    <s-button commandFor="product-menu">Product actions</s-button>
  
    <s-menu id="product-menu" accessibilityLabel="Product actions">
      <s-button icon="edit">Edit product</s-button>
      <s-button icon="duplicate">Duplicate product</s-button>
      <s-button icon="archive">Archive product</s-button>
    </s-menu>
  </>

  html

  <s-button commandFor="product-menu">Product actions</s-button>
  
  <s-menu id="product-menu" accessibilityLabel="Product actions">
    <s-button icon="edit">Edit product</s-button>
    <s-button icon="duplicate">Duplicate product</s-button>
    <s-button icon="archive">Archive product</s-button>
  </s-menu>
  

• Menu with Icons

  Description

  Illustrates a menu with icons for each action, providing visual context for different menu items and showing how to use the caret-down icon on the trigger button.

  jsx

  <>
    <s-button icon="caret-down" commandFor="actions-menu">
      More actions
    </s-button>
  
    <s-menu id="actions-menu" accessibilityLabel="Product actions menu">
      <s-button icon="edit">Edit product</s-button>
      <s-button icon="duplicate">Duplicate product</s-button>
      <s-button icon="archive">Archive product</s-button>
      <s-button icon="delete" tone="critical">
        Delete product
      </s-button>
    </s-menu>
  </>

  html

  <s-button icon="caret-down" commandFor="actions-menu">More actions</s-button>
  
  <s-menu id="actions-menu" accessibilityLabel="Product actions menu">
    <s-button icon="edit">Edit product</s-button>
    <s-button icon="duplicate">Duplicate product</s-button>
    <s-button icon="archive">Archive product</s-button>
    <s-button icon="delete" tone="critical">Delete product</s-button>
  </s-menu>
  

• Menu with Sections

  Description

  Shows how to organize menu items into logical sections with headings, helping to group related actions and improve menu readability.

  jsx

  <>
    <s-button commandFor="organized-menu">Bulk actions</s-button>
  
    <s-menu id="organized-menu" accessibilityLabel="Organized menu">
      <s-section heading="Product actions">
        <s-button icon="edit">Edit selected</s-button>
        <s-button icon="duplicate">Duplicate selected</s-button>
        <s-button icon="archive">Archive selected</s-button>
      </s-section>
      <s-section heading="Export options">
        <s-button icon="export">Export as CSV</s-button>
        <s-button icon="print">Print barcodes</s-button>
      </s-section>
    </s-menu>
  </>

  html

  <s-button commandFor="organized-menu">Bulk actions</s-button>
  
  <s-menu id="organized-menu" accessibilityLabel="Organized menu">
    <s-section heading="Product actions">
      <s-button icon="edit">Edit selected</s-button>
      <s-button icon="duplicate">Duplicate selected</s-button>
      <s-button icon="archive">Archive selected</s-button>
    </s-section>
    <s-section heading="Export options">
      <s-button icon="export">Export as CSV</s-button>
      <s-button icon="print">Print barcodes</s-button>
    </s-section>
  </s-menu>
  

• Menu with Links and Disabled Items

  Description

  Demonstrates a menu with a mix of link-based buttons, standard buttons, and a disabled button, showcasing the menu's flexibility in handling different interaction states.

  jsx

  <>
    <s-button commandFor="mixed-menu">Options</s-button>
  
    <s-menu id="mixed-menu" accessibilityLabel="Mixed menu options">
      <s-button href="javascript:void(0)" target="_blank">
        View product page
      </s-button>
      <s-button disabled>Unavailable action</s-button>
      <s-button download="sales-report.csv" href="/reports/sales-report.csv">
        Download report
      </s-button>
    </s-menu>
  </>

  html

  <s-button commandFor="mixed-menu">Options</s-button>
  
  <s-menu id="mixed-menu" accessibilityLabel="Mixed menu options">
    <s-button href="javascript:void(0)" target="_blank">
      View product page
    </s-button>
    <s-button disabled>Unavailable action</s-button>
    <s-button download href="javascript:void(0)">Download report</s-button>
  </s-menu>
  

• Actions menu with sections

  Description

  Presents a comprehensive menu showing how to create sections with different action groups and include a critical action at the menu's root level.

  jsx

  <>
    <s-button commandFor="customer-menu">Edit customer</s-button>
  
    <s-menu id="customer-menu" accessibilityLabel="Customer actions">
      <s-section heading="Customer management">
        <s-button icon="edit">Edit customer</s-button>
        <s-button icon="email">Send email</s-button>
        <s-button icon="order">View orders</s-button>
      </s-section>
      <s-section heading="Account actions">
        <s-button icon="reset">Reset password</s-button>
        <s-button icon="lock">Disable account</s-button>
      </s-section>
      <s-button tone="critical" icon="delete">
        Delete customer
      </s-button>
    </s-menu>
  </>

  html

  <s-button commandFor="customer-menu">Edit customer</s-button>
  
  <s-menu id="customer-menu" accessibilityLabel="Customer actions">
    <s-section heading="Customer management">
      <s-button icon="edit">Edit customer</s-button>
      <s-button icon="email">Send email</s-button>
      <s-button icon="order">View orders</s-button>
    </s-section>
    <s-section heading="Account actions">
      <s-button icon="reset">Reset password</s-button>
      <s-button icon="lock">Disable account</s-button>
    </s-section>
    <s-button tone="critical" icon="delete">Delete customer</s-button>
  </s-menu>
  

• Menu with nested sections

  Description

  Illustrates a complex menu with nested sections, demonstrating how to organize multiple related actions with icons.

  jsx

  <>
    <s-button icon="settings" commandFor="admin-settings">
      Settings
    </s-button>
  
    <s-menu id="admin-settings" accessibilityLabel="Settings menu">
      <s-section heading="Account">
        <s-button icon="profile">Profile settings</s-button>
        <s-button icon="lock">Security</s-button>
        <s-button>Billing information</s-button>
      </s-section>
      <s-section heading="Store">
        <s-button icon="store">Store settings</s-button>
        <s-button>Payment providers</s-button>
        <s-button icon="delivery">Shipping rates</s-button>
      </s-section>
      <s-button href="javascript:void(0)" icon="person-exit">Sign out</s-button>
    </s-menu>
  </>

  html

  <s-button icon="settings" commandFor="admin-settings">Settings</s-button>
  
  <s-menu id="admin-settings" accessibilityLabel="Settings menu">
    <s-section heading="Account">
      <s-button icon="profile">Profile settings</s-button>
      <s-button icon="lock">Security</s-button>
      <s-button>Billing information</s-button>
    </s-section>
    <s-section heading="Store">
      <s-button icon="store">Store settings</s-button>
      <s-button>Payment providers</s-button>
      <s-button icon="delivery">Shipping rates</s-button>
    </s-section>
    <s-button href="javascript:void(0)" icon="person-exit">Sign out</s-button>
  </s-menu>