SUnorderedList <s-unordered-list>

A bulleted list. SUnorderedList is the typed Vue 3 wrapper for Shopify's Polaris <s-unordered-list> web component.

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

Best practices

• Use it when order doesn't matter. An unordered list presents related items, such as features, options or benefits, with no sequence or ranking. When the sequence matters, use SOrderedList instead.
• Keep items parallel. Give every item the same grammatical structure so the list is easy to scan. Mixing writing styles in one list makes it harder to read.
• Write short items. Lists work best when each item is brief. If items grow long or complex, consider breaking the content into separate sections.
• Limit nesting. Nested lists can organize hierarchical content, but they get hard to follow quickly. If you need more than two levels, the content may not suit a list.

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

Example

Free shipping over $5030-day returns24/7 customer supportAdd items to your cartReview your orderConfirm and check out

<script setup>
import { SUnorderedList, SOrderedList, SListItem, SStack } from 'polaris-vue-elements'
</script>

<template>
  <SStack direction="inline" gap="large-500" alignItems="start">
    <!-- SUnorderedList renders its SListItem children as a bulleted list. -->
    <SUnorderedList>
      <SListItem>Free shipping over $50</SListItem>
      <SListItem>30-day returns</SListItem>
      <SListItem>24/7 customer support</SListItem>
    </SUnorderedList>
    <SOrderedList>
      <SListItem>Add items to your cart</SListItem>
      <SListItem>Review your order</SListItem>
      <SListItem>Confirm and check out</SListItem>
    </SOrderedList>
  </SStack>
</template>

Props

Prop	Type	Description
children	any	The content of the UnorderededList. Accepts only ListItem components.
id	string | undefined	A unique identifier for the element.

Slots

Slot	Description
default	The list entries displayed within the unordered list, where each item is marked with a bullet point. Only accepts list item components as children. Each list item represents a single bulleted entry in the list.