---
title: Divider
description: >-
  The divider component creates clear visual separation between elements in the
  interface. Use divider to separate distinct content groups in forms, settings
  panels, lists, or page sections, helping users scan and understand content
  organization.
api_version: 2026-04
source_url:
  html: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/layout-and-structure/divider
  md: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/layout-and-structure/divider.md
---

# Divider

The divider component creates clear visual separation between elements in the interface. Use divider to separate distinct content groups in forms, settings panels, lists, or page sections, helping users scan and understand content organization.

Dividers support both horizontal and vertical orientations, along with different visual strengths for varying levels of emphasis. For more structured content grouping with headings, use [section](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/layout-and-structure/section).

Dividers are purely decorative — they don't carry semantic meaning and aren't announced by assistive technologies.

### Support Targets (24)

### Supported targets

* [customer-account.​footer.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/footer#footer-render-after-)
* [customer-account.​order-index.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-index-announcement-)
* [customer-account.​order-index.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-index-block-)
* [customer-account.​order-status.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#order-status-announcement-)
* [customer-account.​order-status.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#order-status-block-)
* [customer-account.​order-status.​cart-line-item.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#cart-line-item-render-after-)
* [customer-account.​order-status.​cart-line-list.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#cart-line-list-render-after-)
* [customer-account.​order-status.​customer-information.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#customer-information-render-after-)
* [customer-account.​order-status.​fulfillment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/fulfillment-status#fulfillment-status-targets)
* [customer-account.​order-status.​payment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/payments-and-returns#payments-and-returns-targets)
* [customer-account.​order-status.​return-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/payments-and-returns#return-details-render-after-)
* [customer-account.​order-status.​unfulfilled-items.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/fulfillment-status#unfulfilled-items-render-after-)
* [customer-account.​order.​action.​menu-item.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-action-menu-item-)
* [customer-account.​order.​action.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-action-)
* [customer-account.​order.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/full-page#order-specific-full-page-)
* [customer-account.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/full-page#customer-account-full-page-)
* [customer-account.​profile.​addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-page-default-targets-)
* [customer-account.​profile.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-announcement-)
* [customer-account.​profile.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-block-)
* [customer-account.​profile.​company-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#profile-page-b2b-targets-)
* [customer-account.​profile.​company-location-addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#company-location-addresses-render-after-)
* [customer-account.​profile.​company-location-payment.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#company-location-payment-render-after-)
* [customer-account.​profile.​company-location-staff.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#company-location-staff-render-after-)
* customer-account.​profile.​payment.​render-after

#### Use cases

* **Order summaries**: Separate line items from totals in order detail views so customers can quickly distinguish individual items from the final cost.
* **Account settings**: Divide form sections in settings panels, like separating profile information from notification preferences.
* **Inline metadata**: Use vertical dividers between inline elements like order numbers, dates, and statuses to improve scannability.
* **List separation**: Add visual breaks between items in a list of addresses, payment methods, or subscriptions.

***

## Properties

Configure the following properties on the divider component.

* **direction**

  **'inline' | 'block'**

  **Default: 'inline'**

  The orientation of the divider, using [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).

  * `inline`: A horizontal divider that separates content stacked vertically.
  * `block`: A vertical divider that separates content arranged horizontally. Requires a parent with a defined height to render visibly.

* **id**

  **string**

  A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.

***

## Examples

### Add a horizontal divider

Display a horizontal divider to separate content sections.

## Add a horizontal divider

![A single horizontal line separating content sections.](https://shopify.dev/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/divider-default-C1pKEu0e.png)

## html

```html
<s-divider></s-divider>
```

### Separate items in a list

Place dividers between repeated content blocks to create a scannable list. This example separates saved addresses so customers can quickly distinguish each entry.

## html

```html
<s-stack direction="block" gap="base">
  <s-stack direction="block" gap="small-200">
    <s-text type="strong">Home</s-text>
    <s-text>123 Main St</s-text>
    <s-text>Toronto, ON M5V 2H1</s-text>
  </s-stack>
  <s-divider></s-divider>
  <s-stack direction="block" gap="small-200">
    <s-text type="strong">Work</s-text>
    <s-text>456 King St W</s-text>
    <s-text>Toronto, ON M5V 1K4</s-text>
  </s-stack>
  <s-divider></s-divider>
  <s-stack direction="block" gap="small-200">
    <s-text type="strong">Cottage</s-text>
    <s-text>789 Lakeside Rd</s-text>
    <s-text>Muskoka, ON P1L 1A1</s-text>
  </s-stack>
</s-stack>
```

### Create a vertical divider between inline items

Set `direction="block"` to create a vertical divider between horizontally arranged elements. This example separates an order number, date, and status badge in an inline [stack](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/layout-and-structure/stack).

## html

```html
<s-stack direction="inline" gap="base" alignItems="center">
  <s-text>Order #1042</s-text>
  <s-divider direction="block"></s-divider>
  <s-text>March 15, 2026</s-text>
  <s-divider direction="block"></s-divider>
  <s-badge tone="auto">Delivered</s-badge>
</s-stack>
```

***

## Best practices

* **Use dividers sparingly**: Too many dividers can make a page feel cluttered. Rely on spacing and grouping first, and add dividers only where content boundaries aren't clear from layout alone.
* **Match orientation to layout direction**: Use horizontal dividers in vertical layouts and vertical dividers in horizontal layouts for natural visual flow.
* **Prefer sections for labeled groups**: If the content groups have headings, use [section](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/layout-and-structure/section) instead of raw dividers for better semantics and accessibility.

***