A plugin for Strapi CMS to customize the structure of menus and menu items.
title, url, isProtected, and link target of menu items.yarn add strapi-plugin-tree-menus@latest
Unsupported fieldtype: plugin::tree-menus.treeVite 'global is not defined'https://stackoverflow.com/questions/72114775/vite-global-is-not-defined
to fix enable global to browser:
vite.config.ts in [root]/src/adminimport { mergeConfig, type UserConfig } from 'vite'
export default (config: UserConfig) => {
// Important: always return the modified config
return mergeConfig(config, {
resolve: {
alias: {
'@': '/src',
},
},
optimizeDeps: {
esbuildOptions: {
// Node.js global to browser globalThis
define: {
global: 'globalThis',
},
},
},
})
}
Don't forget to restart or rebuild your Strapi app when installing a new plugin.
| property | type (default) | description |
|---|---|---|
| fieldSchema | object ({}) | Schema for menu items. |
fieldSchemaThe fieldSchema prop is an object that defines the schema for menu items. This is where you can add custom attributes to the MenuItem schema. The example below demonstrates how to add a custom example_field attribute to the MenuItem schema.
// ./config/plugins.js`
'use strict'
module.exports = {
'tree-menus': {
config: {
fieldSchema: {
attributes: [
{
id: 'title',
label: 'Title',
placeholder: 'Enter item title',
type: 'text',
validationType: 'string',
value: 'New items',
required: true,
validations: [
{
type: 'required',
params: ['this field is required'],
},
{
type: 'max',
params: [100, 'Title cannot be more than 100 characters'],
},
{
type: 'default',
params: ['New items'],
},
],
},
{
id: 'url',
label: 'Url',
placeholder: 'Enter url',
type: 'text',
validationType: 'string',
value: '/',
required: true,
validations: [
{
type: 'required',
params: ['this field is required'],
},
{
type: 'max',
params: [200, 'Url cannot be more than 200 characters'],
},
{
type: 'default',
params: ['/'],
},
],
},
{
id: 'target',
label: 'Target',
placeholder: 'Enter target',
type: 'select',
validationType: 'mixed',
value: '_self',
required: true,
validations: [
{
type: 'oneOf',
params: [
['_blank', '_parent', '_self', '_top'],
'this field needs to be one of the following: _blank, _parent, _self, _top',
],
},
{
type: 'default',
params: ['_self'],
},
],
options: [
{
key: '_blank',
value: '_blank',
metadatas: {
intlLabel: {
id: 'tree-menus.target.options._blank',
defaultMessage: 'New window (_blank)',
},
disabled: false,
hidden: false,
},
},
{
key: '_parent',
value: '_parent',
metadatas: {
intlLabel: {
id: 'tree-menus.target.options._parent',
defaultMessage: 'Parent window (_parent)',
},
disabled: false,
hidden: false,
},
},
{
key: '_self',
value: '_self',
metadatas: {
intlLabel: {
id: 'tree-menus.target.options._self',
defaultMessage: 'Same window (_self)',
},
disabled: false,
hidden: false,
},
},
{
key: '_top',
value: '_top',
metadatas: {
intlLabel: {
id: 'tree-menus.target.options._top',
defaultMessage: 'Top window (_top)',
},
disabled: false,
hidden: false,
},
},
],
},
{
id: 'isProtected',
label: 'isProtected',
placeholder: 'Choose isProtected',
type: 'bool',
validationType: 'boolean',
value: false,
required: true,
validations: [
{
type: 'required',
params: ['Need to choose isProtected'],
},
{
type: 'default',
params: [false],
},
],
},
],
},
},
},
}
Default Strapi documentation included the tree-menus documentation.
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 | 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:
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.
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.
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.
Deleting a menu will also delete all of it's menu items.
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.
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
MenuandMenuItemin the Users and Permissions settings, likefindandfindOne.
| 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. |
Fetch a menu with the documentId. Nothing is populated by default.
await fetch('/api/tree-menus/menu/${documentId}')
{
"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": {}
}
Remember to rebuild your app after making changes to some config or other code.
yarn build
# OR
yarn develop
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.
fieldSchema in the Strapi admin panel.
If you are enjoying this plugin and feel extra appreciative, you can buy me a beer or 3 🍺🍺🍺.
FAQs
Menu manage and custom tree field
The npm package tree-menus receives a total of 13 weekly downloads. As such, tree-menus popularity was classified as not popular.
We found that tree-menus demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."