virtuslab-open-sourcevirtuslab-open-source
292

Strapi Plugin Navigation

screenshot of Strapi Plugin Navigation
react
strapi

A plugin for Strapi Headless CMS that provides navigation / menu builder feature with their possibility to control the audience and different output structure renderers like (flat, tree and RFR - ready for handling by Redux First Router)

Github

Overview:

The Strapi Navigation Plugin is a feature for the Strapi Headless CMS admin panel that allows users to build website navigation menus. It provides a visual builder to create and control the navigation structure, and offers multiple options for customization. The plugin also supports different output structure renderers, such as FlatTree and RFR, and can be integrated with webhooks for automatic updates. It is compatible with both light and dark modes, and includes features like content type relations, customizable fields, and an audit log for tracking changes.

Features:

  • Navigation Public API: Simple API endpoint for consuming the created navigation structure.
  • Visual builder: Elegant and user-friendly visual builder for creating navigation menus.
  • Any Content Type relation: Navigation can be linked to any Content Type, allowing for flexibility in content management.
  • Different types of navigation items: Supports internal types, external links, and wrapper elements for clean structure.
  • Multiple navigations: Users can create and manage multiple navigation containers.
  • Light / Dark mode compatible: Designed to support both light and dark modes in the Strapi admin panel.
  • Webhooks integration: Changes to the navigation trigger webhook events for seamless integration.
  • Customizable: Users can customize options like available Content Types, maximum level for "attach to menu," and additional fields.
  • Audit log: Integrates with the Strapi Molecules Audit Log plugin for tracking changes.

Via Strapi Marketplace (Recommended):

  1. Go to the Strapi Marketplace or In-App Marketplace.
  2. Follow the installation instructions provided.

Via command line:

  1. Install yarn according to the documentation.
  2. Use yarn to install the plugin within your Strapi project.
yarn add strapi-plugin-navigation
  1. Rebuild your Strapi instance to apply the changes:
yarn build
  1. Run Strapi in development mode with the --watch-admin option:
yarn develop --watch-admin
  1. The UI Navigation plugin should appear in the Plugins section of the Strapi sidebar.
  2. Go to the Navigation manage view by clicking the "Manage" button to configure your navigation containers.

Summary:

The Strapi Navigation Plugin is a powerful tool for building website navigation menus in the Strapi Headless CMS admin panel. With its visual builder and customizable features, users can create and manage multiple navigation containers, link them to any Content Type, and control the audience and output structure. The plugin is easy to install, supports both light and dark modes, and can be integrated with webhooks for automatic updates. It also includes features like customizable options, an audit log for tracking changes, and a simple API endpoint for consuming the navigation structure.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

strapi
Strapi

Strapi is an open source headless CMS that provides a customizable content management system and API for your projects. It allows you to manage content in a visual interface and use a REST or GraphQL API to retrieve the data.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.