Sometimes we need to go a little deeper and when that happens a 2 level navigation just 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

So to start, if you haven't already, you need to create a 'Navigation' custom type. 

Then you should use a Slice Zone with two slice options: 

  • 1st Level slice
  • 2nd Level slice

You can copy this JSON in to 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..."
                }
              }
            }
          }
        }
      }
    }
  }
}

Using this custom type you can add the links and labels to the document.

 

The Document Editor

This is complicated to output, but here's how it would work:

You add a 1st level element. Let's call this "1A ". Then next will be all the 2nd level elements that fall under "1A".

Then you would add the next 1st level element, which we'll call "1B". Then all of the 2nd level elements that follow this would be under "1B".

You would have a list of slices something like this:

  • 1st Level (1A)
  • 2nd level (2A)
  • 2nd level (2B)
  • 1st level (1B)
  • 2nd level (2C)
  • 2nd level (2D)
  • 2nd level (2E)

And so on... 

In your application

Then when you parse this, your application can create a loop to go through the top levels then within those loops go through the second level items and structure the menu like this :

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

-1B
---2C
---2D
---2E

And all the 3rd level items are already contained within each 2nd level item, so that should be easy to output. 

Using this method you could scale up to as many levels as you need.

Did this answer your question?