strapi-plugin-navigation
Advanced tools
A plugin for Strapi Headless CMS that provides navigation / menu builder feature with their possibility to control the audience and different output structure renderers:
(Use yarn to install this plugin within your Strapi project (recommended). Install yarn with these docs.)
yarn add strapi-plugin-navigation@latest
After successful installation you've to build a fresh package that includes plugin UI. To archive that simply use:
yarn build
yarn develop
or just run Strapi in the development mode with --watch-admin option:
yarn develop --watch-admin
The UI Navigation plugin should appear in the Plugins section of Strapi sidebar after you run app again.
Enjoy 🎉
Complete installation requirements are exact same as for Strapi itself and can be found in the documentation under Installation Requirements.
Supported Strapi versions:
(This plugin is not working with v3.x and not may work with the older Strapi v4 versions, but these are not tested nor officially supported at this time.)
We recommend always using the latest version of Strapi to start your new projects.
To enable Content Type to work with Navigation Item, you've to add following field to your model *.settings.json:
"navigation": {
"model": "navigationitem",
"plugin": "navigation",
"via": "related",
"configurable": false,
"hidden": true
}
inside the attributes section like in example below:
"attributes": {
...,
"navigation": {
"model": "navigationitem",
"plugin": "navigation",
"via": "related",
"configurable": false,
"hidden": true
},
...
},
To setup the plugin properly we recommend to put following snippet as part of config/custom.js or config/<env>/custom.js file. If you've got already configurations for other plugins stores by this way, use just the navigation part within exising plugins item.
...
plugins: {
navigation: {
additionalFields: ['audience'],
allowedLevels: 2,
contentTypesNameFields: {
'blog_posts': ['altTitle'],
'pages': ['title'],
},
gql: { ... }
},
},
...
additionalFields - Additional fields: 'audience', more in the futureallowedLevels - Maximum level for which your're able to mark item as "Menu attached"contentTypesNameFields - Definition of content type title fields like 'content_type_name': ['field_name_1', 'field_name_2'], if not set titles are pulled from fields like ['title', 'subject', 'name']gql - If you're using GraphQL that's the right place to put all necessary settings. More here To properly configure GQL to work with navigation you should provide gql prop which should contain union types which will be used for define GQL response format for your data while fetching:
master: Int
items: [NavigationItem]
related: NavigationRelated
as follows:
gql: {
navigationItemRelated: 'union NavigationRelated = <your GQL related entities>',
},
for example:
gql: {
navigationItemRelated: 'union NavigationRelated = Pages | UploadFile',
},
where Pages and UploadFile are your types to the Content Types you're referring by navigation items relations.
{
"id": 1,
"title": "News",
"type": "INTERNAL",
"path": "news",
"externalPath": null,
"uiRouterKey": "News",
"menuAttached": false,
"parent": 8, // Parent Navigation Item 'id', null in case of root level
"master": 1, // Navigation 'id'
"created_at": "2020-09-29T13:29:19.086Z",
"updated_at": "2020-09-29T13:29:19.128Z",
"related": [ <Content Type model > ],
"audience": []
}
{
"title": "News",
"menuAttached": true,
"path": "/news",
"type": "INTERNAL",
"uiRouterKey": "news",
"slug": "benefits",
"external": false,
"related": {
<Content Type model >
},
"items": [
{
"title": "External url",
"menuAttached": true,
"path": "http://example.com",
"type": "EXTERNAL",
"uiRouterKey": "generic",
"external": true
},
< Tree Navigation Item models >
]
}
{
"id": "News",
"title": "News",
"templateName": "pages:1",
"related": {
"contentType": "page",
"collectionName": "pages",
"id": 1
},
"path": "/news",
"slug": "news",
"parent": null, // Parent Navigation Item 'id', null in case of root level
"menuAttached": true
}
GET <host>/navigation/render/<idOrSlug>?type=<type>
Return a rendered navigation structure depends on passed type (tree, rfr or nothing to render as flat/raw).
Note: The ID of navigation by default is 1, that's for future extensions and multi-navigation feature.
Example URL: https://localhost:1337/navigation/render/1
Example response body
[
{
"id": 1,
"title": "News",
"type": "INTERNAL",
"path": "news",
"externalPath": null,
"uiRouterKey": "News",
"menuAttached": false,
"parent": null,
"master": 1,
"created_at": "2020-09-29T13:29:19.086Z",
"updated_at": "2020-09-29T13:29:19.128Z",
"related": [{
"__contentType": "Page",
"id": 1,
"title": "News",
...
}]
},
...
]
Example URL: https://localhost:1337/navigation/render/1?type=tree
Example response body
[
{
"title": "News",
"menuAttached": true,
"path": "/news",
"type": "INTERNAL",
"uiRouterKey": "news",
"slug": "benefits",
"external": false,
"related": {
"__contentType": "Page",
"id": 1,
"title": "News",
...
},
"items": [
{
"title": "External url",
"menuAttached": true,
"path": "http://example.com",
"type": "EXTERNAL",
"uiRouterKey": "generic",
"external": true
},
...
]
},
...
]
Example URL: https://localhost:1337/navigation/render/1?type=rfr
Example response body
{
"pages": {
"News": {
"id": "News",
"title": "News",
"templateName": "pages:1",
"related": {
"contentType": "page",
"collectionName": "pages",
"id": 1
},
"path": "/news",
"slug": "news",
"parent": null,
"menuAttached": true
},
"Community": {
"id": "Community",
"title": "Community",
"templateName": "pages:2",
"related": {
"contentType": "page",
"collectionName": "pages",
"id": 2
},
"path": "/community",
"slug": "community",
"parent": null,
"menuAttached": true
},
"Highlights": {
"id": "Highlights",
"title": "Highlights",
"templateName": "pages:3",
"related": {
"contentType": "page",
"collectionName": "pages",
"id": 3
},
"path": "/community/highlights",
"slug": "community-highlights",
"parent": "Community",
"menuAttached": false
},
...
},
"nav": {
"root": [
{
"label": "News",
"type": "internal",
"page": "News"
},
{
"label": "Community",
"type": "internal",
"page": "Community"
},
{
"label": "External url",
"type": "external",
"url": "http://example.com"
},
...
],
"Community": [
{
"label": "Highlights",
"type": "internal",
"page": "Highlights"
},
...
],
...
}
}
Depending on a content type templateName will be resolved differently
For collection types it will be read from content type's attribute name template holding a component which definition has option named templateName.
For single types a global name of this content type will be used as a template name or it can be set manually with an option named templateName.
If you would like to use the Strapi Molecules Audit Log plugin you've to first install and then add in you config/middleware.js following section enable it:
{
'audit-log': {
enabled: true,
exclude: [],
map: [
{
pluginName: 'navigation',
serviceName: 'navigation',
Class: Navigation,
},
]
}
}
As a last step you've to provide the Navigation class to let Audit Log use it. To not provide external & hard dependencies we've added the example of class code in the examples/audit-log-integration.js .
Live example of plugin usage can be found in the VirtusLab Strapi Examples repository.
Q: I've recognized Navigation Item and Navigation collection types in the Collections sidebar section, but they are not working properly. What should I do?
A: As an authors of the plugin we're not supporting any editing of mentioned content types via built-in Strapi Content Manager. Plugin delivers highly customized & extended functionality which might be covered only by dedicated editor UI accessible via Plugins Section > UI Navigation. Only issues that has been recognized there, are in the scope of support we've providing.
Feel free to fork and make a Pull Request to this plugin project. All the input is warmly welcome!
For general help using Strapi, please refer to the official Strapi documentation. For additional help, you can use one of these channels to ask a question:
MIT License Copyright (c) 2021 VirtusLab Sp. z o.o. & Strapi Solutions.
FAQs
Strapi - Navigation plugin
The npm package strapi-plugin-navigation receives a total of 3,448 weekly downloads. As such, strapi-plugin-navigation popularity was classified as popular.
We found that strapi-plugin-navigation demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers 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."