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.

We'll create a "Main navigation" singleton custom type to manage the two first levels of links:

  1. the main tabs
  2. 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:

Modelling and management of a Rich navigation for a ecommerce site

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
1 of 2
< PreviousNext >

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
2 of 2
< PreviousNext >

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
CopyExpand/Collapse

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
CopyExpand/Collapse
How to model content for your project Sarah will be glad to help you come up with a solid content model for your project. (It’s free.) Schedule a call