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:
- Add a
1st level
Slice. Let's call this "A". - Then add the
2nd Level
Slice, we'll call it "B", - Finally, you can add all the
3rd level links
in the repeatable zone of the2nd 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