---
components: ["UnorderedList", "ListItem"]
---

<script>
  import { InlineNotification, UnorderedList, ListItem, Link } from "carbon-components-svelte";
  import Preview from "../../components/Preview.svelte";
</script>

`UnorderedList` provides a styled unordered list component that supports nested lists, links, and expressive typography. It's ideal for displaying bulleted content in your interface.

<InlineNotification svx-ignore lowContrast title="Tip:" kind="info" hideCloseButton>
  <div class="body-short-01">
   Consider using the <Link href="/components/RecursiveList#unordered">RecursiveList</Link> component for rendering tree structured data.
  </div>
</InlineNotification>

## Default

Create a basic unordered list with `ListItem` components.

<UnorderedList>
  <ListItem>Unordered list item</ListItem>
  <ListItem>Unordered list item</ListItem>
  <ListItem>Unordered list item</ListItem>
</UnorderedList>

## With links

Add links to list items by wrapping them in `Link` components.

<UnorderedList>
  <ListItem>
    <Link href="#">Unordered list item</Link>
  </ListItem>
  <ListItem>
    <Link href="#">Unordered list item</Link>
  </ListItem>
  <ListItem>
    <Link href="#">Unordered list item</Link>
  </ListItem>
</UnorderedList>

## Nested

Create nested lists by setting `nested` to `true` on child `UnorderedList` components.

<UnorderedList>
  <ListItem>
    Unordered list level 1
    <UnorderedList nested>
      <ListItem>Unordered list level 2</ListItem>
      <ListItem>
        Unordered list level 3
        <UnorderedList nested>
          <ListItem>Unordered list level 3</ListItem>
          <ListItem>Unordered list level 3</ListItem>
        </UnorderedList>
      </ListItem>
    </UnorderedList>
  </ListItem>
  <ListItem>Unordered list level 1</ListItem>
  <ListItem>Unordered list level 1</ListItem>
</UnorderedList>

## Expressive styles

Use Carbon's expressive typesetting by setting `expressive` to `true`.

<UnorderedList expressive>
  <ListItem><Link size="lg" href="#">Unordered list item</Link></ListItem>
  <ListItem>Unordered list item</ListItem>
  <ListItem>Unordered list item</ListItem>
</UnorderedList>