> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Complex Data Types

## Article: Complex Data Types

## Article Link: https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/complex-data-types.md

## Article Content:

import { Property, PropertyList, ExpandableSection } from "@wix/docs-ui/content";


# Complex Data Types
Complex data types allow you to create nested data configurations and collections. Use these to define arrays of items or nested object structures for sophisticated component configurations.

## Array

Define arrays of data. Arrays are useful for repeating content like feature lists, testimonials, gallery items, or menus.

> **Note:** Specify these additional configurations under an `arrayItems` field in your [data item](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/data-overview.md#data-item-fields).

<PropertyList bordered>
  <Property
    name="data"
    type="DataItems"
    description="Each array item contains multiple properties."
  >
    <ExpandableSection name="DataItems properties">
      <PropertyList>
        <Property
          name="items"
          type={<>map&lt;string, <a href="fallback::https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/data-overview.md#data-item-fields">DataItem</a>&gt;</>}
          required
          description="Object containing named data items. Each key becomes a property name. Define all properties your nested object should have."
        />
      </PropertyList>
    </ExpandableSection>
  </Property>
  <Property
    name="dataItem"
    type={<><a href="fallback::https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/data-overview.md#data-item-fields">DataItem</a></>}
    description="Each array item is a single value."
  />
  <Property
    name="maxSize"
    type="int32"
    description="Maximum number of items allowed in the array. Optional but recommended to prevent performance issues."
  />
</PropertyList>

<br />

> **Note:** You must use either `data` or `dataItem`, not both.

### Example

A feature list with structured items:

In the manifest:

```typescript
editorElement: {
  data: {
    features: {
      dataType: "arrayItems",
      displayName: "Feature List",
      defaultValue: [
        { 
          title: "Feature 1", 
          description: "Description 1",
          icon: { uri: "wix:vector://v1/icon1.svg", viewBox: "0 0 24 24" }
        },
        { 
          title: "Feature 2", 
          description: "Description 2",
          icon: { uri: "wix:vector://v1/icon2.svg", viewBox: "0 0 24 24" }
        }
      ],
      arrayItems: {
        data: {
          items: {
            title: {
              dataType: "text",
              displayName: "Feature Title",
              defaultValue: "Feature Title",
              text: {
                maxLength: 100,
              },
            },
            description: {
              dataType: "text",
              displayName: "Feature Description",
              defaultValue: "Feature description goes here",
              text: {
                maxLength: 500,
              },
            },
            icon: {
              dataType: "vectorArt",
              displayName: "Feature Icon",
              defaultValue: {
                uri: "wix:vector://v1/icon.svg",
                viewBox: "0 0 24 24",
              },
            },
          },
        },
        maxSize: 6,
      },
    },
  },
}
```

In the component:

```tsx
import type { ArrayItems, VectorArt } from '@wix/editor-react-types';

interface FeatureItem {
  title: string;
  description: string;
  icon?: VectorArt;
}

interface FeaturesProps {
  features?: ArrayItems;
}

const Features = ({ features }: FeaturesProps) => (
  <ul>
    {(features as FeatureItem[])?.map((item, i) => (
      <li key={i}>
        <span dangerouslySetInnerHTML={{ __html: item.icon?.svgContent ?? '' }} />
        <strong>{item.title}</strong>
        <p>{item.description}</p>
      </li>
    ))}
  </ul>
);
```

### Nested data items

Video player settings with nested configuration using `dataType: "data"`:

```typescript
editorElement: {
  data: {
    videoSettings: {
      dataType: "data",
      displayName: "Video Settings",
      data: {
        items: {
          autoplay: {
            dataType: "booleanValue",
            displayName: "Auto Play",
            defaultValue: false,
          },
          loop: {
            dataType: "booleanValue",
            displayName: "Loop Video",
            defaultValue: false,
          },
          muted: {
            dataType: "booleanValue",
            displayName: "Start Muted",
            defaultValue: true,
          },
          volume: {
            dataType: "number",
            displayName: "Default Volume",
            defaultValue: 50,
            number: {
              min: "0",
              max: "100",
            },
          },
        },
      },
    },
  },
}
```

## Menu items

The `menuItems` data type lets Wix users configure a site navigation menu. When a Wix user edits a menu items field, the editor opens a **Manage Menu** section where they can add, remove, and reorder menu items and link them to site pages.

### Example

A navigation menu field:

In the manifest:

```typescript
editorElement: {
  data: {
    navigation: {
      dataType: "menuItems",
      displayName: "Navigation",
    },
  },
}
```

In the component:

```tsx
import type { MenuItems } from '@wix/editor-react-types';

interface NavProps {
  navigation?: MenuItems;
}

const Nav = ({ navigation }: NavProps) => (
  <nav>
    {navigation?.map(item => (
      <a key={item.id} href={item.link?.href}>{item.label}</a>
    ))}
  </nav>
);
```

## See also

- [Data Overview](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/data-overview.md)
- [Container Data Types](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/container-data-types.md)
- [Primitive Data Types](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/primitive-data-types.md)
- [Link Types](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/link-types.md)
- [Accessibility Types](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/accessibility-types.md)