RecursiveList.svx

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

This component uses the [svelte:self API](https://svelte.dev/docs#svelte_self) to render the [UnorderedList](/components/UnorderedList) and [OrderedList](/components/OrderedList) components with tree structured data.

A child node can render text, a link, HTML content, and other child nodes.

<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
  <div class="body-short-01">
    In version 0.86.0, the <strong>children</strong> prop was renamed to <strong>nodes</strong> for <Link target="_blank" href="https://svelte.dev/docs/svelte/v5-migration-guide#The-children-prop-is-reserved">Svelte 5 compatibility</Link>.
  </div>
</InlineNotification>

<InlineNotification svx-ignore lowContrast title="Warning:" kind="warning" hideCloseButton>
  <div class="body-short-01">
    HTML content provided via the <code>html</code> prop is not sanitized.
  </div>
</InlineNotification>

## Unordered

The `nodes` prop accepts an array of child nodes.

By default, the list type is unordered.

<FileSource src="/framed/RecursiveList/RecursiveList" />

## Ordered

Set `type` to `"ordered"` to use the ordered list variant.

<FileSource src="/framed/RecursiveList/RecursiveListOrdered" />

## Ordered (native styles)

Set `type` to `"ordered-native"` to use the native styles for an ordered list.

<FileSource src="/framed/RecursiveList/RecursiveListOrderedNative" />

## Flat data structure

If working with a flat data structure, use the `toHierarchy` utility
to convert a flat data structure into a hierarchical array accepted by the `nodes` prop.

<FileSource src="/framed/RecursiveList/RecursiveListFlatArray" />