Mintlify Sandbox

Coding Examples

Overview

Sled Tests

Go Headless

Studio Two

Dashboard Extensions

Backend Extensions

Site Extensions

Extend Websites with SDK

Wix APIs and References

Build Apps

Frontend Modules

Client (Deprecated)

API Preview

Wix CLI

Contexts

Ricos

Extend Websites with Velo

API Reference

Velo

Picasso

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](fallback::https://dev.wix.com/docs/site-extensions/editor-react-components/editor-react-types/reference/link).
  </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"
  }
}
```
:::
::::