Creating a 2 level Navigation Menu

Prismic Administrative Support FAQs
1

You can configure a dedicated custom type for editors to manage a navigation menu easily: add navigation items, order links, and manage link labels.

Here is an example of a configuration for a 2-level navigation using Slices. It takes advantage of the Slice's repeatable and non-repeatable zones. In this case, the non-repeatable fields will be for a 1st level link. Then the repeatable fields will correspond to any of the links you want to appear below the 1st level link.

{
  "Main" : {
    "doc_name" : {
      "type" : "StructuredText",
      "config" : {
        "single" : "heading1",
        "label" : "Document name"
      }
    },
    "nav" : {
      "type" : "Slices",
      "fieldset" : "Slice zone",
      "config" : {
        "choices" : {
          "nav_item" : {
            "type" : "Slice",
            "fieldset" : "Nav Item",
            "description" : "Nav Item with Sub Navigation",
            "icon" : "insert_link",
            "non-repeat" : {
              "label" : {
                "type" : "StructuredText",
                "config" : {
                  "single" : "paragraph",
                  "label" : "Label",
                  "placeholder" : "Enter Link Label..."
                }
              },
              "link" : {
                "type" : "Link",
                "config" : {
                  "label" : "Link",
                  "placeholder" : "Select Link..."
                }
              }
            },
            "repeat" : {
              "sub_nav_link_label" : {
                "type" : "StructuredText",
                "config" : {
                  "single" : "paragraph",
                  "label" : "Sub Nav Link Label",
                  "placeholder" : "Enter Sub Nav Link Label..."
                }
              },
              "sub_nav_link" : {
                "type" : "Link",
                "config" : {
                  "label" : "Sub Nav Link",
                  "placeholder" : "Select Sub Nav Link..."
                }
              }
            }
          }
        }
      }
    }
  }
}

Paste this code into the JSON editor tab of a new Custom Type to see the example in action!

2

Threads close after a period of inactivity. Flag this thread to re-open it and continue the conversation.