Strapi Menus
A plugin for Strapi CMS to customize the structure of menus and menu items.
A plugin for Strapi CMS to customize the structure of menus and menu items.
### Supported field types
The following field types in the table below are supported. Some fields use a different type value for the schema and input type.
| Field | Schema Type | Input Type |
| ----------- | ------------------------------------------- | ---------------------------- |
| Boolean | `boolean` | `bool` |
| Date | `date`, `time`, `datetime` | same |
| Email | `email` | same |
| Enumeration | `enumeration` | `select` |
| Media | `media` | same |
| Number | `integer`, `biginteger`, `decimal`, `float` | `number` |
| Password | `password` | same |
| Rich Text | `richtext` | `wysiwyg` |
| Text | `string`, `text` | `string`, `text`, `textarea` |
The following field types are **NOT** supported:
- Component
- Dynamic Zone
- UID
- JSON
> **NOTE:** By default, **rich text fields** are not supported unless a custom plugin overrides the core **WYSIWYG** editor, which is covered in the [Strapi guide to creating a new WYSIWYG field in the admin panel](https://docs.strapi.io/developer-docs/latest/guides/registering-a-field-in-admin.html).
## π User Guide
### Create
On the menus plugin home page, use the "Create new menu" button to get started. You will need to provide a `title` and a unique `slug` value for the new menu. Saving the menu before adding menu items is **recommended** but not required.
### Clone
Choosing to clone an existing menu will take you to the edit view as usual, but this time it will be pre-populated with another menu's data. Once the cloned menu is saved, a brand new menu and menu items are created.
### Delete
Deleting a menu will also delete all of it's menu items.
### Edit
When clicking on a menu item in the left column, it will reveal action buttons to move the item, delete it, or give it a submenu.
The right column will reveal the edit UI for that item, where the `title` is the only required field.
## β‘ API Usage
Fetching menus data is the same as fetching any other data using Strapi's REST API features.
> **Don't forget** to enable the public methods for `Menu` and `MenuItem` in the Users and Permissions settings, like `find` and `findOne`.
### Endpoints
| request | endpoint | description |
| -------- | ---------------------------------- | ----------------- |
| `GET` | `/api/tree-menus/menu` | Fetch all menus. |
| `GET` | `/api/tree-menus/menu/:id` | Fetch one menu. |
| `POST` | `/api/tree-menus/menu/:id` | Create a menu. |
| `PUT` | `/api/tree-menus/menu/:id` | Update a menu. |
| `DELETE` | `/api/tree-menus/menu/:id` | Delete a menu. |
| `POST` | `/api/tree-menus/menu/bulk-delete` | Delete many menu. |
#### Basic example
Fetch a menu with the `documentId`. Nothing is populated by default.
```js
await fetch('/api/tree-menus/menu/${documentId}')
```
##### Response
```json
{
"data": {
"id": 1,
"documentId": "jke4feqw23h1",
"title": "Main Menu",
"slug": "main-menu",
"items": [
{
"id": "1",
"title": "Home",
"url": "/",
"target": "_self",
"isProtected": false,
"children": []
},
{
"id": "2",
"title": "About",
"url": "/about",
"target": "_self",
"isProtected": false,
"children": [
{
"id": "2.1",
"title": "Our Team",
"url": "/about/our-team",
"target": "_self",
"isProtected": false,
"children": []
},
{
"id": "2.2",
"title": "Our Mission",
"url": "/about/our-mission",
"target": "_self",
"isProtected": false,
"children": []
}
]
}
],
"createdAt": "2024-10-07T08:00:00.000Z",
"updatedAt": "2024-10-07T08:00:00.000Z",
"publishedAt": "2024-10-07T08:00:00.000Z"
},
"meta": {}
}
```
## π© Troubleshooting
#### In general
Remember to **rebuild your app** after making changes to some config or other code.
```bash
yarn build
# OR
yarn develop
```
#### Custom `MenuItem` attributes save in the schema or config.
If you are having trouble saving custom attributes in the `MenuItem` schema, make sure that the `fieldSchema` object is properly configured in the `config/plugins.js` file.
`fieldSchema` only supports the following field types: `string`, `text`, `number`, `bool`, `select`, `date`, `time`, `datetime`, `email`.
#### I can't see config `fieldSchema` in the Strapi admin panel.