> 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: MenuItems

## Article: MenuItems

## Article Link: https://dev.wix.com/docs/site-extensions/editor-react-components/editor-react-types/reference/menu-items.md

## Article Content:

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

# MenuItems

A list of navigation menu items, each with a label and a link, optionally nested into
sub-menus. Use it for a navigation field where the Wix user builds a list of links, possibly
across several levels.

## Component

In your component code, import the `MenuItems` type from `@wix/editor-react-types`:

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

A `MenuItems` is an array of `MenuItem`. A `MenuItem` has the following properties:

<PropertyList bordered>
  <Property
    name="id"
    type="string"
    required
    description="A unique identifier for the item."
  />
  <Property
    name="label"
    type="string"
    required
    description="The display label shown to the site visitor."
  />
  <Property name="link" type="Link">
    The item's navigation link, a
    [Link](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-react-types/reference/link.md).
  </Property>
  <Property
    name="container"
    type="ReactElement"
    description="A container element rendered alongside the item."
  />
  <Property
    name="items"
    type="MenuItem[]"
    description="Nested child items, for multi-level menus."
  />
</PropertyList>

### Usage

Your code either consumes a value of type `MenuItems` or produces one:

::::tabs
:::Consumers
In a component that receives a `MenuItems`, render each item and recurse into `items` for
sub-menus:

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

function Menu({ menu }: { menu?: MenuItems }) {
  return (
    <ul>
      {menu?.map((item) => (
        <li key={item.id}>
          <a href={item.link?.href}>{item.label}</a>
          {item.items && <Menu menu={item.items} />}
        </li>
      ))}
    </ul>
  );
}
```
:::
:::Producers
When your code produces a `MenuItems`, for a context or a function return, build an array of
items, each with an `id` and `label` and any nested `items`:

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

const menu: MenuItems = [
  { id: 'home', label: 'Home', link: { href: '/' } },
  {
    id: 'shop',
    label: 'Shop',
    link: { href: '/shop' },
    items: [{ id: 'new', label: 'New Arrivals', link: { href: '/shop/new' } }],
  },
];
```
:::
::::

## Manifest

In your manifest, declare the field with the `menuItems` dataType:

```json
{ "dataType": "menuItems" }
```

### Declaration

Declare a `menuItems` field in one of these ways, depending on where the value comes from:

::::tabs
:::Data-property
Declare it as a data property when the Wix user builds the menu in a panel. It takes
`dataType`, `displayName`, and an optional `defaultValue`:

```json
{
  "menu": {
    "dataType": "menuItems",
    "displayName": "Main Menu",
    "defaultValue": [
      { "id": "home", "label": "Home", "link": { "href": "/" } },
      { "id": "shop", "label": "Shop", "link": { "href": "/shop" } }
    ]
  }
}
```
:::
:::Context-item
Declare it as a context item when your component supplies the menu to descendant
components. It takes just `dataType` and `displayName`:

```json
{
  "menu": {
    "dataType": "menuItems",
    "displayName": "Main Menu"
  }
}
```
:::
:::Function-parameter-and-return
Declare it on a function when the function accepts or returns a menu. It takes `dataType`
and an optional `displayName`, and a parameter may also set `optional`:

```json
{
  "parameters": [
    {
      "dataType": "menuItems",
      "displayName": "Main Menu"
    }
  ],
  "returns": {
    "dataType": "menuItems"
  }
}
```
:::
::::