Headless CMS

Definitions & benefits

Tools & Concepts

Open source

Features

Authentication

Custom plugins & Marketplace

Webhooks

Multilingual CMS

APIs

Dynamic Zones

User roles & permissions

Content Modeling

Security & Privacy

Use Cases

Ecommerce

Blog

Forum

About Strapi

Life at Strapi

Releases & Roadmap

Events

Community

News

The Tutorials section covers an introduction to Strapi, some advanced technical content, product updates and releases. From basic workaround to in-depth development guides. 

Tutorials

How tos

Get all the latest updates, news and events.

Subscribe to the newsletter 📣

In this article, we'll explore how to create a dynamic website menu by leveraging Strapi, an open-source, Node.js based, headless CMS. Strapi is a fantastic platform for developing APIs quickly, which is perfect for feeding data to your website's front end. We'll walk through building a menu similar to Strapi's own, featuring drop-downs, headings, links, and buttons.

![Dynamic Menus with Strapi](https://api-prod.strapi.io/uploads/Dynamic_Menus_with_Strapi_420abb2d8c.png)

## Setup

To begin, please ensure that you have a fresh Strapi v4 project up and running. We're going to create sections first, these will each form part of the large drop-down in the menu above. We will then create individual links and buttons.

![Setup – Build a menu on Strapi](https://api-prod.strapi.io/uploads/Setup_Build_a_menu_on_Strapi_e526308c95.png)

## Creating Sections as Collection Types in Strapi

![Creating Sections as Collection Types in Strapi](https://api-prod.strapi.io/uploads/Creating_Sections_as_Collection_Types_in_Strapi_2c4ebd0ae4.png)

Navigate to the "Collection Types" in Strapi Admin and create a new one. Let's call it `Section`. In each section, we'll need a heading (the title to appear at the top) and a `Links` component (to be created shortly) encapsulating all the links inside the section.

![Creating Sections as Collection Types in Strapi2.png](https://api-prod.strapi.io/uploads/Creating_Sections_as_Collection_Types_in_Strapi2_0febdbe122.png)

While still creating the `Section`, add a component and name it `Link`. Create a category to place this component in, the category name does not matter. The component will be created as a repeatable component and should contain a `name` for the link and a `URL` for its destination.

![Creating Sections as Collection Types in Strapi](https://api-prod.strapi.io/uploads/Creating_Sections_as_Collection_Types_in_Strapi3_a38d240c1e.png)

Additionally, we're going to add two fields: a `text (long)` type for description and an `icon`, which is an image (single-type media).

Hit `Save`. You can now go ahead and create several sections under the newly created `Section` collection by creating a section and adding links to it.

![Creating Sections as Collection Types in Strapi](https://api-prod.strapi.io/uploads/Creating_Sections_as_Collection_Types_in_Strapi4_ef3990d647.png)

## Creating Additional Components

Now that we have created a `Section` with internally nested `Link` components, let's create *menu links*, *buttons*, and *drop downs*. Menu links are straightforward additions for the top bar, buttons add interactivity, and dropdown menus improve organization by allowing us to group links based on themes or content.

### Creating the Dropdown Component

A dropdown menu houses multiple sections. In the Components area of Strapi's admin, create a new component, name it `Dropdown`, and place it under the `Menu` category. Add a `title` field and a `Relation` field linked to `Sections`. Set the relation as 'has many sections', which means a dropdown can contain multiple sections.

![Creating the Dropdown Component](https://api-prod.strapi.io/uploads/Creating_the_Dropdown_Component_6e0238949d.png)

A dropdown menu houses multiple sections. In the Components area of Strapi's admin, create a new component, name it `Dropdown`, and place it under the `Menu` category. Add a `title` field and a `Relation` field linked to `Sections`. Set the relation as 'has many sections', which means a dropdown can contain multiple sections.

### Creating the Menu Link Component

Next, let's create menu links. Call this component `Menu Link`, and place it under the `Menu` category. Add `title` and `URL` fields to store the link's name and destination.

![Creating the Menu Link Component](https://api-prod.strapi.io/uploads/Creating_the_Menu_Link_Component_69b54c43b8.png)

### Creating the Button Component

Finally, we'll create buttons for actions such as 'Sign Up', 'Contact Us', etc. Name this component `Button`, place it under the `Menu` category, and add a `title` and `URL`.

Additionally, let's add an enumeration field, `Type`. This field hosts classes to style the button on the front end. For instance, we can have a `Primary` or `Secondary` class, which alters the button's look.

![Creating the Button Component](https://api-prod.strapi.io/uploads/Creating_the_Button_Component_7923d9d0a8.png)

### Constructing the Menu

Now that we have all the building blocks in place, let's construct the menu.

Create a new single type called `Main Menu`. Inside it, add a Dynamic Zone named `Main Menu Items`. Add the components--`Dropdown`, `Menu Link`, and `Button` to this zone.

![Constructing the Menu](https://api-prod.strapi.io/uploads/Constructing_the_Menu_a0e56a24b1.png)

In the content manager, you can add all three types of components to the Main Menu Items Dynamic Zone.

The Dropdown can be given a title (like 'Product') and sections (like 'Product' and 'Features'). You can add multiple dropdowns, each with a title and related sections.

![Constructing the Menu](https://api-prod.strapi.io/uploads/Constructing_the_Menu_005dc533ae.png)

For Menu Links, you can add links like 'Docs' and 'Pricing' with their corresponding URLs.

![Constructing the Menu](https://api-prod.strapi.io/uploads/Constructing_the_Menu_e27939fa0b.png)

For the Button, you can create a button like 'Contact Sales' and provide a URL for it. Make sure to assign a class (`Primary` or `Secondary`) to it.

![Constructing the Menu](https://api-prod.strapi.io/uploads/Constructing_the_Menu_730ca2f89f.png)

After adding all the sections, links, and buttons, save and publish your menu.

## Generating the JSON Data for Front End Access

Once you have published your menu, you need to ensure that the data is accessible on the front end.
Navigate to `Settings` -> `Roles & Permissions` -> `Public User`, and allow `Find` for `Main Menu` and `Sections`. Save the settings.

![Generating the JSON Data for Front End Access](https://api-prod.strapi.io/uploads/Generating_the_JSON_Data_for_Front_End_Access_0fa1352550.png)

You can then access the menu configuration by making a get request to: `https://localhost:1337/api/main-menu?populate[0]=MainMenultems&populate[1]=MainMenultems.sections&populate[2]=MainMenultems.sections.links`

The data is returned in JSON format, which can be used to populate the content of your menu on the front end.

![Build a menu on Strapi](https://api-prod.strapi.io/uploads/Build_a_menu_on_Strapi_8dc32ce522.png)

That’s it! By using Strapi, we've created a flexible system for building out a menu dynamically. This is one of many powerful features Strapi provides and is a testament to its capabilities as one of the rising stars in the CMS space.

You can checkout the video walk through [here](https://youtu.be/sp-vqDWG9Y4?feature=shared)


large_Building a Landing Page in Strapi, a Step by Step Guide (1).jpg

medium_Building a Landing Page in Strapi, a Step by Step Guide (1).jpg

small_Building a Landing Page in Strapi, a Step by Step Guide (1).jpg

thumbnail_Building a Landing Page in Strapi, a Step by Step Guide (1).jpg

Building a Landing Page in Strapi, a Step by Step Guide (1).jpg

How to generate Dynamic Website Menus with Strapi

I'm currently working full-time as the CTO at Arctic Leaf. I'm an Entrepreneur & Full-stack developer who likes to keep busy building cool stuff.

Writer

In this post, we'll explore how to build a landing page using Strapi. We'll dive into the Content-Type Builder and see how to construct a landing page using single types with components and dynamic zones. We will be replicating the newsroom landing page in Strapi.

![Build a landing page in Strapi.jpeg](https://api-prod.strapi.io/uploads/build_a_landing_page_in_Strapi_a63dbaa971.jpeg)

## The Building Blocks: Components

Before we work with our single type, we're going to create the components. These components will later be stitched together inside of a dynamic zone in order to create our single type page, which will provide the data to power this landing page. Below is the breakdown of the components we will be creating:

-   A header with a title and subtitle.
-   A title component used in a few different places.
-   Two buttons constituting a call to action.
-   A list of articles.
-   Info cards near the bottom of the page.

![build a landing page in Strapi 2.jpeg](https://api-prod.strapi.io/uploads/build_a_landing_page_in_Strapi_2_2f998f6d7d.jpeg)

Let's start building the components, one by one.

## The Header Component

Starting with the header, we'll create a new component called `Header`. This component will have two text fields: `title` and `subtitle`.

![build a landing page in Strapi 3.jpeg](https://api-prod.strapi.io/uploads/build_a_landing_page_in_Strapi_3_640514e20b.jpeg)

Once done, the new `Header` component should appear in the Components tab. Save it and move onto the next one.

### The Title Component

Since our landing page reuses the title in different places, we'll create a `Title` component. This will simply be a text field named `title`.

![build a landing page in Strapi 4.jpeg](https://api-prod.strapi.io/uploads/build_a_landing_page_in_Strapi_4_7e317c14b4.jpeg)

After saving this, we proceed to create the third component, which is the call to action with two buttons.

### The Two Button CTA Component

![build a landing page in Strapi 5.jpeg](https://api-prod.strapi.io/uploads/build_a_landing_page_in_Strapi_5_4f8b432f34.jpeg)

To create this dynamic call to action component we will create two button components nested inside of a parent component. To do this, we'll create the parent `TwoButtonCTA` with two components: `FirstButton` and `SecondButton`. Each button will have a `Title`, `Link`, and an `Enum` (`Primary`, `Secondary`, `Outline`, `Outline Icon`). The Enum enables us to easily style the buttons later on.

![build a landing page in Strapi 6.jpeg](https://api-prod.strapi.io/uploads/build_a_landing_page_in_Strapi_6_60c6c90fbc.jpeg)

Saving our `TwoButtonCTA` creates both `FirstButton` and `SecondButton` automatically as separate components.

### The Article List Component

We now move onto creating an `ArticleList` component. This will hold multiple `Article` sub components, which themselves will include a `Title`, `Date`, and an `Icon` (Media Field). This entire structure forms the skeleton of the article section on the landing page.

![build a landing page in Strapi 7.jpeg](https://api-prod.strapi.io/uploads/build_a_landing_page_in_Strapi_7_5a676f1f2a.jpeg)

Saving our `ArticleList` automatically generates the subcomponent `Article` for us, making these components reusable in future pages.

### The Info Card Component

Our final component is the `InfoCard`. Here, we need to include a `Title` (Text), `Image` (Media), `Description` (Long Text), and `Background` (Enum). Additionally, we'll attach an existing `Button` component as `CTA button`.

![build a landing page in Strapi 8.jpeg](https://api-prod.strapi.io/uploads/build_a_landing_page_in_Strapi_8_c7bbb64967.jpeg)

This is the last component that we needed to create.

## Building the Landing Page: Creating our Single Type

With our components ready, we will build the `Newsroom` single type page. Here, we leverage Strapi's feature of dynamic zones.

Adding a dynamic zone called `PageContent`, to our `Newsroom` single type allows us to add all our created components. This gives content editors the flexibility to use these components in any order they prefer, omitting some, arranging some, and styling based on the enumerations we've set up.

![build a landing page in Strapi 9.jpeg](https://api-prod.strapi.io/uploads/build_a_landing_page_in_Strapi_9_c886b2998a.jpeg)

With this done, a content editor can construct the `Newsroom` page. They can add any number of `Article` components inside an `ArticleList`. They can specify a date, title, and icon for each `Article` added. Similarly, they can add any number of `InfoCard` components, each with their unique title, image, description, background color, and button.

![build a landing page in Strapi 10.jpeg](https://api-prod.strapi.io/uploads/build_a_landing_page_in_Strapi_10_3024af0074.jpeg)

In this step-by-step guide we illustrated the power of Strapi's content type builder. We've gone from multiple simple `Components` to creating a dynamic `single type page`. The key to this is the use of dynamic zones. This feature provides flexibility, allows for the rearrangement, styling, and adding/removing sections from the single type page, enabling you to build intuitive, user-friendly interfaces.

You can checkout out the video walk though [here](https://youtu.be/npRO9IeCeN4?feature=shared)

large_Building a Landing Page in Strapi, Step by Step.jpg

medium_Building a Landing Page in Strapi, Step by Step.jpg

small_Building a Landing Page in Strapi, Step by Step.jpg

thumbnail_Building a Landing Page in Strapi, Step by Step.jpg

Building a Landing Page in Strapi, Step by Step.jpg

Building a Landing Page in Strapi, Step by Step

As a developer working with Strapi in the past, there have been many scenarios where I wished I could have easily taken a backup of my data. To export my data from one Strapi instance and then import it back to another Strapi instance when needed was a frequent chore. Thanks to the Strapi CLI, this is now a trivial task. 

In this article, we will show how you can export your data from one instance and then import it again to another instance with a couple of simple commands.

While importing and exporting data is useful, sometimes you want to push or pull data you already have in a local Strapi instance to a remote Staging instance. You also may want to pull production data down to a local Strapi instance for testing. This is where the data transfer commands come in handy. We will also demonstrate how to use these commands in the Strapi CLI as well.

Read on to learn how to use the import, export, and data transfer options in the CLI.

## Prerequisites

Before you can jump into this content, you need to have a basic understanding of the following.

1. Basic knowledge of JavaScript
2. A [Node.js](https://nodejs.org/en) ready environment
3. Basic understanding of Strapi - get started [here](https://docs.strapi.io/dev-docs/quick-start).

## What is Strapi?

Strapi is an open-source headless CMS based on Node.js that is used to develop and manage content using a Restful API and/or GraphQL.

With Strapi, we can scaffold our API faster and consume the content via APIs using any HTTP client or GraphQL enabled frontend.

## Scaffolding a Strapi Project

Scaffolding a new Strapi project is very simple and works precisely as installing a new front-end framework.

We are going to start by running the following commands and testing them out in our default browser.

```javascript
npx create-strapi-app strapi-api --quickstart
# OR
yarn create strapi-app strapi-api --quick start
```

The command above will scaffold a new Strapi project in your specified directory.

Next, run yarn build to build your app and yarn develop to run the new project if it doesn't start automatically.

The last command will open a new tab with a page to register your new admin of the system. Go ahead and fill out the form and click on the submit button to create a new Admin.

[![Strapi Enterprise Edition](/uploads/Strapi_Enterprise_Edition_f8358ff798.png)](https://strp.cc/3nZhgL0)

## Using the Strapi CLI Export then Import

We will use the Strapi blog template as a starter in this example. We have one project populated with the starter data and another with **the same schema** but no data. 

It is important to note that your schemas must match the Strapi data import/export CLI commands to succeed. Another important thing to note is that Strapi will not copy over admin users, API tokens, or third-party content, strictly files and content within the Strapi instance. 

In our start blog, you can see our two projects below: our project with content and our other project that currently does not have any content.

![project with content](/uploads/Project_with_Content_48a8a7bfc8.png "Instance with Content")

![project with no content](/uploads/strapi_without_content_cff56fd2e3.png "Instance without Content")

The first thing we have to do is export the content from our populated instance. Many options can be applied to this CLI command, but we will just stick to the basics in this example. You can see a complete list of CLI commands in [the documentation](https://docs.strapi.io/dev-docs/data-management/export).

![strapi export command](/uploads/export_command_c2503bae4f.png "Strapi CLI Export")

Now that we have exported our data and encrypted the export, we can move over to our empty project. We will import this data in the console for our empty project by running the following commands from the CLI. Again, further options can be found in [the documentation](https://docs.strapi.io/dev-docs/data-management/import).

![strapi import command](/uploads/import_command_7ef0cf481f.jpg "Strapi CLI Import")

And just like that, we now have our content from our local environment replicated in our remote staging environment. Below is a screenshot again of our local environment and our remote staging environment, except this time after using the Strapi CLI export and then import features.

![project with content after export](/uploads/strapi_with_content_after_export_f01e965cc2.png "Instance with Content After Export")

![project with new content after export](/uploads/strapi_with_imported_content_834c60178b.png "Instance with new Content After Import")

## Pushing Data to a Remote with Strapi Transfer

Next, we will use the same Strapi blog template project to demonstrate how to push our local content to a remote project (our staging environment). We first have to get an authorization token from our remote project to do this. This token will be a push token allowing us to push data into the remote instance. You can create this token in the Strapi admin, as shown below.

![push transfer token admin](/uploads/transfer_token_a9965423f9.png "Push Transfer Token Admin")

Now that we have our push token, we can run the Strapi transfer CLI command. Again, before this is run, you must ensure that the schema of your local project and your remote project match. In this case, they do as both projects are the Strapi Blog Template, except our remote is missing the start content. Below you can see us run the transfer command. For all the options of the transfer command, you can [read the docs](https://docs.strapi.io/dev-docs/data-management/transfer).

![data transfer command](/uploads/strapi_transfer_command_6607662e46.png "Strapi CLI Transfer")

And just like that, we have our data from our local environment pushed into our remote! It's really that easy. Below is a screenshot of first our local environment and second our remote.

![local project with content](/uploads/local_transfer_with_content_6777b41973.png "Local Instance with Content")

![remote project with content](/uploads/remote_transfer_with_content_c0f73f9923.png "Remote Instance with new Content After Transfer")


## Wrap Up

From our examplese above you can see that both the import and export CLI features as well as the data transfer CLI features are welcoming additions to the Strapi CLI. When you need to create a backup for an archive or simply to import to another project, the Import and Export features of the Strapi CLI should be your go to. Likewise, if you want to push or pull data to or from a remote instance, the Strapi CLI Transfer feature should be your go to. I hope you enjoyed this article, thanks for reading. 

> If you prefer to follow a video tutorial for importing and exporting data with the Strapi CLI, check our [YouTube channel](https://www.youtube.com/@Strapi/featured). 
<iframe width="560" height="315" src="https://www.youtube.com/embed/nZ5CRZTGkMQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>


Learn how to use the import, export, and data transfer options in the Strapi CLI to migrate data.