How to model a complex navigation menu
Most e-commerce sites have a rich navigation menu. In this example we'll give a modelling example for a 3-levels navigation.
Main navigation
We'll create a "Main navigation" singleton custom type to manage the two first levels of links:
- the main tabs
- the sets of links related to each tab
Mega menu navigation
When visitors hover the 2nd level links, a "Mega menu" panel shows with more links and an optional promo banner. We'll create a specific custom type for these "Mega menus", each menu will be handled by a specific document in Prismic.
Let's break down the configuration of those two custom types below:
To manage the main tabs and their related set of links, we use a unique Slice in the "Main Navigation" custom type.
In the non-repeatable zone:
- Key Text field for managing the main tab label
In the repeatable zone:
- Key Text field for managing the label of the 2nd level link
- Content relationship field for specifying the target "Category" page in case the visitor clicks on the 2nd level link
- Content relationship field for selecting the "Mega menu" displayed when visitors hover on the 2nd level link
The "Mega menu" custom type is modelled this way:
In the fixed part of the custom type:
- Any fields needed for the optional promo banner (i.e., Image, Text and Link)
In the Slice Zone, we'll configure a unique Slice for content editors to manage groups of links.
In the non-repeatable zone of the Slice:
- Key text field for the label of the group of links
- Content relationship field to specify the target of this link
In the repeatable zone of the Slice:
- Key text field for the link label
- Content relationship field for the link target
How to set it up in Prismic?
First create the "Main navigation" type:
- Set up a new singleton Custom Type
- Copy the JSON below and paste it under the JSON editor of this new custom type
{ "Main" : { "display_name" : { "type" : "StructuredText", "config" : { "single" : "heading1", "label" : "Display name", "placeholder" : "CMS display name" } }, "logo" : { "type" : "Image", "config" : { "constraint" : { }, "thumbnails" : [ ], "label" : "Logo" } }, "body" : { "type" : "Slices", "fieldset" : "Slice zone", "config" : { "labels" : { "tab" : [ ] }, "choices" : { "tab" : { "type" : "Slice", "fieldset" : "Tab", "description" : "Level 1 navigation tab with optional Level 2 items", "icon" : "tab", "display" : "list", "non-repeat" : { "level_1_link_label" : { "type" : "Text", "config" : { "label" : "Level 1 link label", "placeholder" : "Level 1 link label" } } }, "repeat" : { "level_2_link_label" : { "type" : "Text", "config" : { "label" : "Level 2 link label", "placeholder" : "Level 2 link label" } }, "level_2_link" : { "type" : "Link", "config" : { "select" : "document", "customtypes" : ["category"], "label" : "Level 2 link", "placeholder" : "Level 2 link" } }, "mega_menu" : { "type" : "Link", "config" : { "select" : "document", "customtypes" : ["ecommerce_-_mega_menu"], "label" : "Mega menu", "placeholder" : "Mega menu to display when hovering" } } } } } } } } }See More
Second create the "Mega menu" type:
- Set up a new repeatable Custom Type
- Copy the JSON below and paste it under the JSON editor of this new custom type
{ "Main" : { "display_name" : { "type" : "StructuredText", "config" : { "single" : "heading1", "label" : "Display name", "placeholder" : "Display name" } }, "mega_menu_highlight" : { "type" : "Image", "config" : { "constraint" : { }, "thumbnails" : [ ], "label" : "Mega Menu Highlight" } }, "highlight_link_label" : { "type" : "Text", "config" : { "label" : "Highlight link label", "placeholder" : "Highlight link label" } }, "highlight_link" : { "type" : "Link", "config" : { "select" : "document", "label" : "Highlight link" } }, "body" : { "type" : "Slices", "fieldset" : "Slice zone", "config" : { "labels" : { "group_of_links" : [ ] }, "choices" : { "group_of_links" : { "type" : "Slice", "fieldset" : "Group of links", "description" : "Group of links", "icon" : "insert_link", "display" : "list", "non-repeat" : { "group_label" : { "type" : "Text", "config" : { "label" : "Group label", "placeholder" : "Group label" } }, "link" : { "type" : "Link", "config" : { "select" : "document", "label" : "Link", "placeholder" : "Link" } } }, "repeat" : { "category_link_label" : { "type" : "Text", "config" : { "label" : "Category link label", "placeholder" : "Category link label" } }, "category_link" : { "type" : "Link", "config" : { "select" : "document", "label" : "Category link", "placeholder" : "Category link" } } } } } } } } }See More