Creating a 3+ level Navigation Menu

Sometimes we need to go a little deeper, and when that happens, a 2 level navigation won't do. This article will show you how to create the content model in your custom types for having a 3 level or greater navigation menu for large websites.

The Custom Type

Create a 'Navigation' Custom Type and add two Slices:

  • 1st Level slice
  • 2nd Level slice

You can copy this JSON into the JSON editor to create the custom type:

{
  "Navigation" : {
    "body" : {
      "type" : "Slices",
      "fieldset" : "Slice zone",
      "config" : {
        "choices" : {
          "1st_level" : {
            "type" : "Slice",
            "fieldset" : "1st Level",
            "description" : "1st Level Nav item",
            "icon" : "filter_1",
            "display" : "list",
            "non-repeat" : {
              "nav_link" : {
                "type" : "Link",
                "config" : {
                  "allowTargetBlank" : true,
                  "label" : "Nav Link"
                }
              },
              "link_text" : {
                "type" : "Text",
                "config" : {
                  "label" : "Link Text",
                  "placeholder" : "Link text..."
                }
              }
            },
            "repeat" : { }
          },
          "2nd_level" : {
            "type" : "Slice",
            "fieldset" : "2nd Level",
            "description" : "2nd Level Nav item",
            "icon" : "filter_2",
            "display" : "list",
            "non-repeat" : {
              "nav_link" : {
                "type" : "Link",
                "config" : {
                  "label" : "Nav Link",
                  "allowTargetBlank" : true
                }
              },
              "link_text" : {
                "type" : "Text",
                "config" : {
                  "label" : "Link Text",
                  "placeholder" : "Link Text..."
                }
              }
            },
            "repeat" : {
              "third_level_link" : {
                "type" : "Link",
                "config" : {
                  "allowTargetBlank" : true,
                  "label" : "3rd Level Link"
                }
              },
              "third_level_link_text" : {
                "type" : "Text",
                "config" : {
                  "label" : "3rd Level Link Text",
                  "placeholder" : "Link Text..."
                }
              }
            }
          }
        }
      }
    }
  }
}

The Document Editor

Here's an example of how this would work:

  1. Add a 1st level Slice. Let's call this "A".
  2. Then add the 2nd Level Slice, we'll call it "B",
  3. Finally, you can add all the 3rd level links in the repeatable zone of the 2nd Level Slice.

You would have a list of slices something like this:

  • 1st level Slice (A)
  • 2nd level Slice (B)
    • 3rd level (1B)
    • 3rd level (2B)
    • 3rd level (3B)
      And so on...

After that, you can add a Content Relationship field to your documents and link this navigation menu for each nested link.

-A
---1A
-B
---1B
---2B
---3B

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