---
title: Section
description: >-
  The `Section` component groups related content into clearly-defined thematic
  areas. Use it to organize content and provide clear navigation landmarks.


  The component manages heading levels automatically, ensuring nested sections
  maintain proper semantic structure. Only one secondary action button is
  supported for each section.
api_version: 2025-10
api_name: pos-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/layout-and-structure/section
  md: >-
    https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/layout-and-structure/section.md
---

# Section

The `Section` component groups related content into clearly-defined thematic areas. Use it to organize content and provide clear navigation landmarks.

The component manages heading levels automatically, ensuring nested sections maintain proper semantic structure. Only one secondary action button is supported for each section.

## Properties

Configure the following properties on the `Section` component.

* heading

  string

  A title that describes the content of the section. If omitted and no secondary actions are provided, the section will be rendered without a header.

* id

  string

  A unique identifier for the element used for targeting with CSS, JavaScript, or accessibility features.

## Slots

The `Section` component supports slots for additional content placement within the section. Learn more about [using slots](https://shopify.dev/docs/api/polaris/using-polaris-web-components#slots).

* secondary-actions

  HTMLElement

  A button element to display in the section heading. Only a single button is supported. Use the `slot="secondary-actions"` attribute to place action elements that relate to the entire section's content.

### Examples

* #### Group related content into sections

  ##### Description

  Group related content using a \`Section\` component. This example shows a basic section with a heading and content area.

  ##### Default

  ```html
  <s-section heading="Select product category">
    <s-button slot="secondary-actions">Edit</s-button>
    <s-choice-list>
      <s-choice value="snowboards">Snowboards</s-choice>
      <s-choice value="jackets">Jackets</s-choice>
      <s-choice value="label">Label</s-choice>
    </s-choice-list>
  </s-section>
  ```

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/section-default.png)

## Best practices

* **Write descriptive headings:** Provide clear heading text that represents the section's content.
* **Let heading levels adjust automatically:** Nested sections automatically adjust heading levels for proper semantic structure.
* **Place relevant secondary actions:** Use the secondary-actions slot for actions that apply to the entire section, like "Edit Settings" or "Add Item."