This is the fourth article in the Angular / Prismic series. In the previous three articles, we launched the default Angular project, integrated Prismic, and added a homepage along with a couple of content pages.

This article requires that you have already gone through the previous three articles. If you have not already gone through them, here are the links.

1. Getting Started wit Prismic & Angular
2. Adding Slices to your Homepage
3. Adding Routes to your app

Here is the project code you need to start this tutorial but we suggest going through these articles if you have not already.

In this article we will expand on this and add a navigation to the website that we can control and edit from Prismic.

Create a Navigation Custom Type

Let's start by creating a new Custom Type for the navigation. Head to your Prismic repository, navigate to your Custom Types, then click "New" to create a new type.

Select the "Single Type" option and enter "Navigation" for the name. Make sure that this automatically generates the API ID of "navigation".

Click "Create new custom type." This will take you to the Custom Type edit screen where you can add the content fields to the new type.

For the sake of time & space, we won't go through how to setup the content fields manually. Instead here is the final JSON code for the Navigation Custom Type that you can paste into the JSON Editor.

{
  "Main": {
    "title": {
      "type": "StructuredText",
      "config": {
        "single": "heading1",
        "label": "Title",
        "placeholder": "Title for Prismic UI..."
      }
    },
    "menu_links": {
      "type": "Group",
      "config": {
        "fields": {
          "label": {
            "type": "StructuredText",
            "config": {
              "single": "paragraph",
              "label": "Link Label",
              "placeholder": "Link Label..."
            }
          },
          "link": {
            "type": "Link",
            "config": {
              "label": "Link",
              "placeholder": "Select a Link...",
              "allowTargetBlank": true
            }
          }
        },
        "label": "Menu Links"
      }
    }
  }
}

Save the Navigation type.

Here we just created a new type with the following fields: