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. You add a 1st level element. Let's call this "1A ". Then next will be all the 2nd level elements that fall under "1A".
  2. 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 (A)
    • 2nd level (1A)
    • 2nd level (2A)
  • 1st level (B)
    • 2nd level (1B)
    • 2nd level (2B)
    • 2nd level (3B)
      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 :

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

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

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.